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 large

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)
  1. One
  2. Two
  3. Three
  4. 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!

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

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!

Headline 4

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!

Headline 5

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!

Headline 6

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!

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

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!


Narrow - max 678px

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!


Columns

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

 
 
 
 
 
Custom Column Lengths
 
 
 
 
Col gaps
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Form elements

Form message
Incorrect email format

Variant options


Buttons and Links

Primary anchor

Primary anchor

Secondary 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

Secondary 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

Accent 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

Black 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

Default swiper

Optional text goes here
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Swiper with large flat bullets

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Swiper with flat bullets

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Swiper with narrow progress bar

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

Cards

Collection card

Small card. Image 80x80 and less spacing between image + text

Default card

Product card

Default grid:

Přejít na obsah produktu

Na skladě

Přejít na obsah produktu

Skladem s nízkou skladovou zásobou

Přejít na obsah produktu

Na skladě

Přejít na obsah produktu

Skladem s nízkou skladovou zásobou

Přejít na obsah produktu
Běžná cena
Akční cena

Na skladě

Přejít na obsah produktu
Běžná cena
Akční cena

Na skladě

Přejít na obsah produktu

Na skladě

Product in list view:

Přejít na obsah produktu

Na skladě

Přejít na obsah produktu

Skladem s nízkou skladovou zásobou

Přejít na obsah produktu

Na skladě

Přejít na obsah produktu

Skladem s nízkou skladovou zásobou

Přejít na obsah produktu
Běžná cena
Akční cena

Na skladě

Přejít na obsah produktu
Běžná cena
Akční cena

Na skladě

Přejít na obsah produktu

Na skladě

Article card

In the design, this is also referred to as the USP component


USP's

Order delivery within 24 hours
Free shipping on orders over 999 CZK
Possibility to try in our showroom

Availability
In stock
Free shipping

Image and text

10 cols default

Liquid error (snippets/format-image line 230): invalid url input Liquid error (snippets/format-image line 230): invalid url input

Can we help you with anything?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nisl sem. Suspendisse condimentum hendrerit euismod.


12 cols PLP promo

Liquid error (snippets/format-image line 230): invalid url input Liquid error (snippets/format-image line 230): invalid url input

Eccentric Grinding machines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nisl sem. Suspendisse condimentum hendrerit euismod. Nulla porta est id mauris volutpat efficitur.

View all

Video

Autoplay is enabled. This is optional.

Liquid error (snippets/format-image line 230): invalid url input

SVG icons

Icons


Payment icons


Social icons