Type Styles
We use fluid scaling for typography, meaning we don't need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work. With this in mind, it's important to ensure line-height and letter-spacing are set in percentage (%) values, not pixels.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 7
Heading 8
Body
Caption
Utility
Badges
New
FREE UK DELIVERY
45% off
up to 50% off
HEX
Tiles
Fluid Utility
We use fluid scaling for utility classes, meaning we don't need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work.
Following are the utilities are available available:
fluid-text-[mobile|desktop]fluid-line-height-[mobile|desktop]fluid-gap-[mobile|desktop]fluid-pl-[mobile|desktop]fluid-pr-[mobile|desktop]fluid-pb-[mobile|desktop]fluid-pt-[mobile|desktop]fluid-ml-[mobile|desktop]fluid-mr-[mobile|desktop]fluid-mb-[mobile|desktop]fluid-mt-[mobile|desktop]fluid-inset-[mobile|desktop]fluid-top-[mobile|desktop]fluid-right-[mobile|desktop]fluid-bottom-[mobile|desktop]fluid-left-[mobile|desktop]fluid-size-[mobile|desktop]
Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base
Examples:
Fluid, 12|16
Fluid, 30|70
fluid-size-[200|400]
Component Button
Reusable button component with various styling options
Usage Examples
{% render 'component-button', label: 'Click me', variant: 'primary' %}
{% render 'component-button', label: 'Add to Cart', variant: 'primary', icon: 'icon-cart', icon_position: 'left', icon_size: '20' %}
{% render 'component-button', label: 'Shop Now', variant: 'secondary', url: '/collections/all' %}
{% render 'component-button', label: 'Unavailable', variant: 'primary', size: 'sm', disabled: true %}
{% render 'component-button', label: 'Custom', variant: 'primary', button_classes: 'w-full', attributes: 'data-custom="value"' %}
Sizes
Small
Medium
Default
With Icons
Icon Left
Icon Right
Spacing
2xs
xs
sm
md
lg
xl
2xl
3xl
Border Radius
rounded-sm
rounded-md
rounded-lg
rounded-rounded
Colors
Brand Primary
Brand Secondary
Foreground
Foreground Secondary
Background Secondary
Background
Brand Colors
Brand White
Brand Black
Brand Focus
Brand Danger
Brand Disabled
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Brand Blue
Brand Blue Medium
Brand Blue Light
Brand Red
Brand Red Medium
Brand Red Light
Brand Pink
Brand Pink Medium
Brand Pink Light
Brand Purple
Brand Purple Medium
Brand Purple Light
Brand Green
Brand Green Medium
Brand Green Light
Brand Orange
Brand Orange Medium
Brand Orange Light
Form Controls
Some help text here
This is a custom Select field
Swiper Carousels
Product Cards
Dialogs / Modals
Inner modal
Dynamic Product Card
Section Injection with Live Params
Enter something to search for
Tabs component
Typically, this component would be rendered dynamically as part of section blocks, or something similiar, and the attributes could all be controlled dynamically. For the sake of the styleguide, I've hardcoded three tabs.
content for tab 1