Styleguide | Catchii
This page is here to show off styles and components for standard page elements such as typography, form
elements, icons, product cards and more. These are hard coded in an alternate page template file containing
the section
main-styleguide.liquid
.
Colors
Theme colors
Primary
Secondary
Tertiary
Dark
Accent
Gray
Communication colors
Info
Success
Warning
Danger
Color schemes
Add classs 'color-scheme color-scheme--type' to your element, where 'type' is any of the ones listed below (black, white, primary, secondary, accent, gray)
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.
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.
Tertiary 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.
Dark 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.
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.
Gray 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.
Typography
Headings
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Paragraphs
Sizes
Text xs
Text sm
Text base
Text lg
Text xl
Label
Label xs
Label sm
Label
Label lg
Label xl
Transforms
Normal
Capitalised
Uppercased
Type styles
- Strong
- Emphasis
- Link
Strike- Sup
RTE (Rich text editor)
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!
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!
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!
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!
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
- 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
| 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 |
Grid
Icons
User interface icons
Payment icons
Social icons
Forms
Quantity input
Collapsibles
Collapsible pane title
Collapsible pane content
Collapsible pane title
Collapsible pane content
Collapsible pane title
Collapsible pane content
Badges
Badges size: default. Default badges are responsive.
Badges size: sm
Badges size: md
Prices
- Normale prijs
- €199,95
- Normale prijs
- €199,95
- Normale prijs
- €199,95
- Normale prijs
- €199,95
- Normale prijs
- €219,95
- Normale prijs
- €199,95
- Normale prijs
- €219,95
- Normale prijs
- €219,95
Collection cards
Collection cards can be styled as blocks. These are just examples.
Product cards
Behang Bamboe natural Bricks
- Normale prijs
- €199,95
Behang Bamboe Natural Mixed
- Normale prijs
- €199,95
Behang Bamboe Stack
- Normale prijs
- €199,95
Behang Bamboe Sunburn Lines
- Normale prijs
- €199,95
Behang Bamboo Braided Trellis
- Normale prijs
- €219,95
Behang Bamboo Brown Bricks
- Normale prijs
- €199,95
Behang Bamboo Trellis
- Normale prijs
- €219,95
Behang Black Swan
- Normale prijs
- €219,95
Blog post cards
Article cards can be styled as blocks. These are just examples and don't contain all options.
Learn how to keep your handmade wallpaper looking beautiful for years to come, from installation best practices to gentle cleaning techniques.
Read moreDiscover five powerful ways that custom, handmade wallpaper can transform any room — from creating focal points to telling your personal story through design.
Read moreA practical guide to selecting custom wallpaper that suits your space, from choosing the right pattern and scale to understanding how light affects your choice.
Read more