Logo

<li>{{ 'logo.svg' | inline_asset_content }}</li>
<li class="black">{{ 'logo.svg' | inline_asset_content }}</li>
<li class="white">{{ 'logo.svg' | inline_asset_content }}</li>

----------

.black path {
  fill: var(--color-fbm-text);
}
.white path {
  fill: var(--color-white);
}

Colors

background-color: var(--color-fbm-primary);

Fibremood

• fbm-primary

• fbm-neutral

• fbm-light-accent

• fbm-text

• fbm-secondary

• fbm-accent

• white

• text-muted

• text-muted-light

States

• 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</p>

<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>

<h1>Heading 1</h1>

<p class="h1">Heading 1</p>

<h2>Heading 2</h2>

<p class="h2">Heading 2</p>

<h3>Heading 3</h3>

<p class="h3">Heading 3</p>

<h4>Heading 4</h4>

<p class="h4">Heading 4</p>

<h5>Heading 5</h5>

<p class="h5">Heading 5</p>

<p class="text-small">Small Text</p>

<p class="text-micro">Micro Text</p>

Buttons

<button class="button button--primary">Primary</button>
<button class="button button--primary" disabled>Primary Disabled</button>
<a href="#" class="button button--primary">Primary</a>

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

<button class="button button--primary button--outline">Primary Outline</button>
<button class="button button--primary button--outline" disabled>Primary Outline Disabled</button>
<a href="#" class="button button--primary button--outline">Primary Outline</a>

<button class="button button--secondary button--outline">Secondary Outline</button>
<button class="button button--secondary button--outline" disabled>Secondary Outline Disabled</button>
<a href="#" class="button button--secondary button--outline">Secondary Outline</a>

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

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

<button class="button button--primary button--outline on-dark">Primary Outline</button>
<button class="button button--primary button--outline on-dark" disabled>Primary Outline Disabled</button>
<a href="#" class="button button--primary button--outline on-dark">Primary Outline</a>

<button class="button button--secondary button--outline on-dark">Secondary Outline</button>
<button class="button button--secondary button--outline on-dark" disabled>Secondary Outline Disabled</button>
<a href="#" class="button button--secondary button--outline on-dark">Secondary Outline</a>

Text Links

<a href="#" class="link--text">Link Text Style</a>
<a href="#" class="underlined-link">Underlined Link</a>
<a href="#">Default Link</a>

<a href="#" class="link-with-icon">Link with Icon {{ 'icon-fbm-right-arrow.svg' | inline_asset_content }}</a>
<a href="#" class="link-with-icon"> {{ 'icon-fbm-left-arrow.svg' | inline_asset_content }} Icon on Left</a>

Icons

{{ 'icon-user.svg' | inline_asset_content }}

• General

• fbm-back

• fbm-basket

• fbm-bookmark-filled

• fbm-bookmark

• fbm-cart

• fbm-chevron-down

• fbm-chevron-left

• fbm-chevron-right

• fbm-chevron-up

• fbm-close

• fbm-difficulty

• fbm-down-arrow

• fbm-enlarge-filled

• fbm-enlarge

• fbm-filters

• fbm-heart

• fbm-left-arrow

• fbm-right-arrow

• fbm-top-arrow

• fbm-menu

• fbm-minus

• fbm-open-in-window

• fbm-play

• fbm-plus

• fbm-quickview

• fbm-search

• fbm-shaking-hands

• fbm-share

• fbm-tick

• fbm-user

• fbm-view

• fbm-UK

• fbm-USA

• Social

• fbm-facebook

• fbm-facebook-filled

• fbm-instagram

• fbm-pinterest

• fbm-youtube

• fbm-tik-tok

• fbm-whatsapp

Forms

<div class="field">
  <input
    id="inputid"
    type="text"
    class="field__input"
    placeholder="Name"
  >
  <label class="field__label" for="inputid">Input</label>
</div>

<textarea
  rows="10"
  id="textarea"
  class="text-area field__input"
  name="Textarea"
  placeholder="Textarea"
  >
    {{- form.body -}}
</textarea>

<textarea
          rows="10"
          id="textarea"
          class="text-area field__input"
          name="Textarea"
          placeholder="Textarea"
          >
          {{- form.body -}}
          </textarea>

<label for="checkbox" class="checkbox__label">
    <input
        type="checkbox"
        name="Name"
        value="1"
        id="checkbox"
        checked
    >
    {{ 'square.svg' | inline_asset_content }}
    {{- 'icon-checkmark.svg' | inline_asset_content -}}
    Value
</label>

<input
    type="radio"
    id="radio"
    name="name"
    value="value"
    form="form"
    checked
>
<label for="radio">
    Value
</label>