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 redType 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
|
|
Numeric bullet
|
|
Child lists (to match the RTE styles) |
|
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
Form elements
Buttons and Links
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 hereSwiper with large flat bullets
Swiper with flat bullets
Swiper with narrow progress bar
Collapsibles
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.
Cards
Specs
Laser diode 515 nm, <1 mW
Laser diode Much longer specification text goes here
Laser diode Even longer specification text goes here that runs over 3 lines
This label goes over 2 lines to see what happens 515 nm, <1 mW

Concrete

This will likely not happen but just in case: a long label

Concrete
Specs without an image
Collection card
Small card. Image 80x80 and less spacing between image + text
Default card
Product card
Default grid:
13DÍLNÁ UNIVERZÁLNÍ SADA NÁŘADÍ PROFESSIONAL
Sada nářadí
- Běžná cena
- 1 479,00 Kč 1 222,31 Kč bez DPHs DPH
Skladem s nízkou skladovou zásobou
1× PROCORE18V 4.0AH + 1× PROCORE18V 5.5AH + GAL 1880 CV
Startovací sada
- Běžná cena
-
5 489,00 Kč 4 536,36 Kčbez DPHs DPH - Akční cena
- 5 039,00 Kč 4 164,46 Kč bez DPHs DPH
Vyprodáno
- Běžná cena
- 170,00 Kč 140,50 Kč bez DPHs DPH
Skladem s nízkou skladovou zásobou
Skladem s nízkou skladovou zásobou
Na skladě
Na skladě
Na skladě
Product in list view:
13DÍLNÁ UNIVERZÁLNÍ SADA NÁŘADÍ PROFESSIONAL
Sada nářadí
- Běžná cena
- 1 479,00 Kč 1 222,31 Kč bez DPHs DPH
Skladem s nízkou skladovou zásobou
1× PROCORE18V 4.0AH + 1× PROCORE18V 5.5AH + GAL 1880 CV
Startovací sada
- Běžná cena
-
5 489,00 Kč 4 536,36 Kčbez DPHs DPH - Akční cena
- 5 039,00 Kč 4 164,46 Kč bez DPHs DPH
Vyprodáno
- Běžná cena
- 170,00 Kč 140,50 Kč bez DPHs DPH
Skladem s nízkou skladovou zásobou
Skladem s nízkou skladovou zásobou
Na skladě
Na skladě
Na skladě
Article card
In the design, this is also referred to as the USP component


Item with no link
USP's
Image and text
10 cols default