Odkaz na Všechny produkty
Odkaz na Styles

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file containing the section main-page-styles.liquid.

Colors

Visit this page in the Theme Editor and toggle the Branding shop type to see the primary color change. The current shop type is .

Brand text

Primary

Primary 50%

Primary dark

Secondary

Secondary hover

Gray 50%

Gray Dark

Gray Dark 50%

Gray light

Gray light 50%

Black

Black 20%

White

Positive

Negative

Yellow

Orange

Border

Typography

Headline large

Headline 1 black

Headline 1

Headline 1 regular

Headline 2 black

Headline 2

Headline 2 regular

Headline 3 black

Headline 3

Headline 3 regular

Headline 4 black

Headline 4

Headline 4 regular

Headline 5 black

Headline 5

Headline 5 regular

Headline 6 black

Headline 6

Headline 6 regular

Capitalised

Uppercased

Paragraphs

Weight light. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Weight regular. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Weight regular-italic. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Weight bold. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Weight bold-italic. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Weight black. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Alternative sizes

Default font size is 16px.

12px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

14px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

16px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

18px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Badges & text elements

Badge Badge blue Badge red

Na skladě

Skladem s nízkou skladovou zásobou

Vyprodáno

Předobjednávka

Type styles

Strong
Emphasis
Inline link
Strike
^Sup
Item with a popover icon top
Item with a popover icon bottom

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
The author of the quote

Lists

`ul` (default)	One Two Three Four
Numeric bullet `ol` (default)	One Two Three Four
Child lists (to match the RTE styles)	One Two Three, with child list First sub item Second sub item Third sub item, with child list Third level item Another third level item Four

Rich text styles

Headline 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 3

Headline 4

Headline 5

Headline 6

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
The author of the quote

One
Two
Three, with child list
- First sub item
- Second sub item
- Third sub item, with child list
  - Third level item
  - Another third level item
Four

Default tables

Order	Date	Payment Status	Fulfillment Status	Total
#1001	December 22, 2015	Authorized	Unfulfilled	$43.03
#1002	December 23, 2015	Authorized	Unfulfilled	$44.03
#1003	December 24, 2015	Authorized	Unfulfilled	$45.03
#1004	December 25, 2015	Authorized	Unfulfilled	$46.03
#1005	December 26, 2015	Authorized	Unfulfilled	$47.03
#1006	December 27, 2015	Authorized	Unfulfilled	$48.03

Content widths

Default - max 1360px

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Compact max 1134px

Narrow - max 678px

Columns

More info on griddle, css-tricks and learn-css-grid

Custom Column Lengths

Col gaps

Form elements

Label

Form message

Email. Type to see the error message

Incorrect email format

Label text for select

Label for checkbox

Disabled checkbox

Radio input 1

Radio input 2

Radio input disabled

Variant options

Option 1

Option 2

Option 3

Option 4

Buttons and Links

Primary anchor

Secondary anchor

Links

Link with icon left
Link with icon right

Tabs

Color schemes

Primary color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with icon left

Sliders

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Collapsibles

Collapsible button 1

Better quality than DIY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus mi nec orci fringilla, eu ornare magna rhoncus. Fusce porta risus eget sem placerat, ut tristique dolor ornare. Pellentesque condimentum accumsan metus a auctor. Curabitur est metus, placerat nec pellentesque sed, viverra sit amet quam. Fusce euismod viverra mi eget blandit. Nam vel efficitur ipsum. Cras semper vulputate justo a consectetur. Donec facilisis metus nec risus facilisis congue. Quisque porta varius est, et iaculis dui varius sit amet. Nunc vulputate sit amet turpis vitae placerat. Morbi aliquam suscipit iaculis. Sed hendrerit sit amet ex rhoncus congue.

Collapsible button 2

Collapsible content 2

Collapsible button 3

Collapsible content 3