Logo

{% render 'icons', icon: 'logo' %}
<div class="black">{% render 'icons', icon: 'logo' %}</div>
----------
.black path {
    fill: var(--color-black);
}

Colors

background-color: var(--color-cobault);

• black

• white

• soft-blue

• light-grey

• stone

• dark-grey

• cobault

• sky-blue

• teal

• orange

• yellow

• steel-blue

• sand

• success-10

• success-20

• success-40

• success-60

• success-80

• success-100

• info-10

• info-20

• info-40

• info-60

• info-80

• info-100

• warning-10

• warning-20

• warning-40

• warning-60

• warning-80

• warning-100

• error-10

• error-20

• error-40

• error-60

• error-80

• error-100

Dropshadow

• Small
• Medium
• Large
• XLarge
• Sticky Button

box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-large);
box-shadow: var(--shadow-xlarge);
box-shadow: var(--shadow-sticky-button);

Typography

<p>Regular, <em>Italic</em>, <strong>Bold</strong>, <em><strong>Bold Italic</strong></em>, <strong class="font-medium">Semi-Bold</strong>, <em><strong class="font-medium">Semi-Bold Italic</strong></em></p>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p class="subtitle">Subtitle 18 Bold</p>

<p><strong>Body 16 Bold</strong></p>

<p>Body 16 Regular</p>

<p class="text-15 font-medium">Body 15 Bold</p>

<p class="text-15">Body 15 Regular</p>

<p class="text-legal">Legal 16 Regular</p>

<p class="text-14 leading-tight font-medium">Caption 14 Regular</p>

<p class="text-13 leading-tight">Caption 13 Regular</p>

<p class="text-12 leading-tight">Caption 12 Regular</p>

<p><a href="#" class="text-button">Button 16</a></p>

<p><a href="#" class="text-button-link">Button Link 16</a></p>

<p><a href="#" class="text-button text-14">Button 14</a></p>

<p><a href="#" class="text-button-link text-14">Button Link 14</a></p>

Buttons

<button class="sfc-button primary">Primary</button>
<button class="sfc-button primary" disabled>Primary Disabled</button>
<a href="#" class="sfc-button primary">Primary</a>
<button class="sfc-button secondary">Secondary</button>
<button class="sfc-button secondary" disabled>Secondary Disabled</button>
<a href="#" class="sfc-button secondary">Button Primary</a>

<button class="sfc-button primary on-dark">Primary</button>
<button class="sfc-button primary on-dark" disabled>Primary Disabled</button>
<a href="#" class="sfc-button primary on-dark">Primary</a>
<button class="sfc-button secondary on-dark">Secondary</button>
<button class="sfc-button secondary on-dark" disabled>Secondary Disabled</button>
<a href="#" class="sfc-button secondary on-dark">Button Primary</a>

<button class="sfc-button circle">1</button>
<button class="sfc-button circle" disabled>2</button>
<a href="#" class="sfc-button circle">1</a>
<span class="sfc-button circle disabled">2</span>

<button class="sfc-button primary link">Primary - Link Style</button>
<a href="#" class="sfc-button primary link">Primary - Link Style</a>
<button class="sfc-button secondary link">Secondary - Link Style</button>
<a href="#" class="sfc-button secondary link">Button Primary - Link Style</a>

Icons

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

• shield

• arrow-left-reg

• arrow-left

• arrow-right-reg

• arrow-right

• basket

• bin

• chevron-down-reg

• chevron-down

• chevron-left

• chevron-right

• download

• edit-reg

• edit

• exit

• filter

• help

• menu

• minus

• plus

• search

• sort

• star

• user

• facebook

• instagram

• linkedin

• pinterest

• twitter-x

• youtube