Style Guide

Logo


    {% render 'logo', type: 'stacked', color: 'leaf-green', width: '20rem' %}


    {% render 'logo', type: 'linear', color: 'leaf-green', width: '20rem' %}

Colours


    available globally as var(--color-<colorName>)

    also available in Taliwind as tw-bg-<colorName>

white

black

warm-stone

sky-blue

grey-blue

bumblebee

amber

spring-green

leaf-green

coral

crimson

neutral-50

neutral-200

neutral-300

neutral-500

neutral-600

neutral-700

neutral-800

error

warning

success

info

Typography

Hero Heading

<* class="hero-heading">Hero Heading</*>

H1 sample

<h1>H1 sample</h1>

H2 sample

<h2>H2 sample</h2>

H3 sample

<h3>H3 sample</h3>

H4 sample

<h4>H4 sample</h4>

Sub-heading

<* class="sub-heading">Sub-heading</*>

Sub-heading bold

<* class="sub-heading tw-font-bold">Sub-heading bold</*>

Body text

<p>Body text</p>

Body text bold

<p class="tw-font-bold">Body text bold</p>

Body text small

<p class="text-small">Body text</p>

Body text small bold

<p class="text-small tw-font-bold">Body text</p>

H1 Logo font Sample

<h1 class="logo-font">H1 Logo font Sample</h1>

H2 Logo font Sample

<h2 class="logo-font">H2 Logo font Sample</h2>

Buttons

<button class="button">Button Primary</button>

<button disabled class="button">Disabled Primary</button>

<button class="button button--secondary">Button Secondary</button>

<button disabled class="button button--secondary">Disabled Secondary</button>

<button class="button button--tertiary">Button Tertiary</button>

<button disabled class="button button--tertiary">Disabled Tertiary</button>

<button class="button button--xsmall">Extra Small</button>

<button class="button button--small">Small</button>

<button class="button button--medium">Medium</button>

<button class="button button--large">Large</button>

<button class="button button--xlarge">Extra Large</button>

<button class="button tw-w-full">Full-width</button>

Link Example <a href="#">Link example</a>

Icons

This theme has icons separated into different files.
Below is a list of all available icons.

Custom Icons

{% render 'icon-custom', icon: icon %}

badge

truck

table

rain

sale

free-sample

Default Theme Icons

{% render 'icon', icon: icon %}

3d-model

account

arrow

arrow-right

back

bag

caret

cart

checkmark

chevron

chevron-alt

clipboard

close-alt

discount

drag

error

filter

gift

grid

grid-2

grid-3

grid-4

hamburger

heart

horizontal-dots

house

images

info

list

localization

minus

nav

pen

play

play-solid

play-circle

plus

question

remove

ruler

search-alt

share-nodes

spinner

success

tick

truck

unavailable

zoom

{% render 'icon-guarantee', icon: icon %}

apple

banana

bottle

carrot

chat_bubble

check_mark

clipboard

dolly

download

dryer

eye

fire

globe

gluten_free

headset

heart

leaf

light

lightning_bolt

link

lock

map_pin

music

package

paw_print

pepper

phone

plane

plant

price_tag

question_mark

recycle

return

ruler

shield

ship

shop

silhouette

snowflake

star

stopwatch

truck

washing

{% render 'icon-accordion', icon: icon %}

apple

banana

bottle

box

carrot

chat_bubble

check_mark

clipboard

dairy

dairy_free

dryer

eye

fire

gluten_free

heart

iron

leaf

leather

lightning_bolt

lipstick

lock

map_pin

nut_free

pants

paw_print

pepper

perfume

plane

plant

price_tag

question_mark

recycle

return

ruler

serving_dish

shirt

shoe

silhouette

snowflake

star

stopwatch

truck

washing

{% render 'icon-brand', icon: icon %}

envelope

facebook

instagram

rss

snapchat

tiktok

tumblr

twitter_old

twitter

youtube

vimeo

Base Elements

Inputs

<input type="text" class="field__input">

<input type="text" class="field__input invalid">

Checkbox example


          <input type="checkbox" name="checkbox-example" id="checkbox-id"> 

          <label for="checkbox-id">Checkbox example</label>

Sale Badges

Metafield

Accordion

Title

<accordion-tab class="accordion">
    <details>
        <summary>
            <span class="summary__title">
                <p class="accordion__title">
                    Title
                </p>
                {% render 'icon', icon: 'plus' %}
                {% render 'icon', icon: 'minus' %}
            </span>
            <span class="icon icon-plus-alt"></span>
        </summary>
        <div class="accordion__content rte typeset">
            Content
        </div>
    </details>
</accordion-tab>