UI Kit Documentation

Examples

General

${ item.name }

Utilities

${ item.name }

Elements

${ item.name }

Components

${ item.name }

General

Introduction

The Silverfin UI kit is a toolset used to transform visual designs into HTML without reinventing the CSS. Instead of a full fledged framework where you work with predefined components (like for example Bootstrap or Bulma), the UI kit has a limited set of components for complex patterns only, and encourages you to use single utility classes to design in the browser. This gives you a lot of flexibility.

Installation

Usage

Installing the UI kit can be done via bower

bower install silverfin-ui-kit
bower update silverfin-ui-kit

Development

You need run the following:

bundle install
npm install --global gulp-cli
npm install

Once those steps are done, you’re ready to serve the project locally:

gulp
// or
bundle exec gulp

// other commands
gulp sass:main
gulp sass:docs
gulp sass:watch
gulp jekyll

// deploy to AWS static website uikit.getsilverfin.com
jekyll-s3

Naming conventions

CSS classnames for modules (Elements, Components, …) always use kebab-case convention. Descendants and modifiers are added by using a single dash.

.sf-module
.sf-module-descendant
.sf-module-modifier

.sf-module-name-modifier

Some of the CSS classes are general modifiers, they are called single utilities, are not directly attached to a module and can be used on every single HTML-element. They also follow the kebab-case convention.

text

<div class="sf-alignc">
  <h5 class="sf-inline-block">text</h5>
</div>

General classes

These are some general classes that are not bound to a specific module, but rather to the general layout.

Selector	Description
sf-body	Applies defaults (background-color, font-size & font-color) to the page. Also removes styling to UL, OL
sf-border-box	adds `box-sizing: border-box` to all child elements
sf-a	Removes underline and adds opacity fade on hover
sf-a-primary	Primary link with primary-dark hover color
sf-link	Adds border-bottom. Used for heading links
sf-hr	Styling for HR elements

Utilities

What are single utilities?

Single utilities are CSS-classes that can be applied to modify any HTML-element. They mostly apply one specific CSS rule, hence the name single utilities. You should only add them when you want them to be applied, they are using the !important statement, so you cannot override them.

Some of these single utility classes also have responsive modifiers

some text

<div class="sf-xs-alignc sf-md-alignl">
  some text
</div>

Typography

Font sizes

Since heading elements don’t say much about the visual style, I’d recommend to not use them for interface designs. They are mainly used for SEO purposes and we don’t need that in our app. So instead of using heading elements h1, h2, h3, ..., use single utility classes to style span or div elements.

The quick brown fox jumps over the lazy dog

<div class="sf-level-vertical">
  <div class="sf-font-xl">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-l">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-m">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-s">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-xs">The quick brown fox jumps over the lazy dog</div>
</div>

Line heights

Token line heights where line-height-x translates to line-height: 1.xxx

The quick brown fox jumps over the lazy dog

<div class="sf-level-vertical">
  <div class="sf-font-xl sf-line-height-1">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-xl sf-line-height-2">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-xl sf-line-height-3">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-xl sf-line-height-4">The quick brown fox jumps over the lazy dog</div>
  <div class="sf-font-xl sf-line-height-5">The quick brown fox jumps over the lazy dog</div>
</div>

Font weight

We have 4 variations in font-weight, however, sf-font-light is rarely used in our interface designs so try to limit using the light font-weight.

Light

Normal

Medium

Bold

<div class="sf-level-vertical">
  <div class="sf-font-light">Light</div>
  <div class="sf-font-normal">Normal</div>
  <div class="sf-font-medium">Medium</div>
  <div class="sf-font-bold">Bold</div>
</div>

Decoration

You can apply some modifier to text-elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="sf-dim-el">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="sf-small-meta">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="sf-uppercase">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

Color

We generate single utility classes for each color defined in variables.scss for background, color and fill (used for SVG). If you want a full list of our colors, please visit https://storage.googleapis.com/sf-ui-kit-cfa43499/examples/colors.html

Text-color

You can apply any of the Silverfin defined colors to text, using sf-c-{color}-{varation}. Each color has a default defined, which is accessible using sf-c-{color}.

Text Text Text Text Text

<span class="sf-c-primary-lighter">Text</span>
<span class="sf-c-primary-light">Text</span>
<span class="sf-c-primary">Text</span>
<span class="sf-c-primary-dark">Text</span>
<span class="sf-c-primary-darker">Text</span>

Background-color

Text Text Text Text Text

<div class="sf-level sf-c-white">
  <span class="sf-bg-primary-lighter">Text</span>
  <span class="sf-bg-primary-light">Text</span>
  <span class="sf-bg-primary">Text</span>
  <span class="sf-bg-primary-dark">Text</span>
  <span class="sf-bg-primary-darker">Text</span>
</div>

Fill & stroke (SVG)

You can fill SVG shapes using sf-fill, which will use the text-color to fill the shape. So use it in combination with sf-c-{color}.

Same goes for sf-stroke.

<div class="sf-c-primary">
  // using sf-fill will fill the shape with the primary color
  // using sf-stroke will make the stroke use the primary color
</div>

Padding

Padding classes are generated based on the spaces variable defined in variables.scss. They follow the structure of sf-pad-{side}-{size}, where side is optional. The sizes go from 1 to 6.

.sf-pad-0
.sf-pad-1
...
.sf-pad-6

.sf-pad-t-0 // padding-top
.sf-pad-r-0 // padding-right
.sf-pad-b-0 // padding-bottom
.sf-pad-l-0 // padding-left

.sf-pad-h-0 // padding-left and padding-right
.sf-pad-v-0 // padding-top and padding-bottom

Margin

When two vertical margins hit each other, they collapse and the biggest one overrides the smaller one. Because of that, we only allow margin-bottom, so that whenever you drag around elements/components with margin defined, they’ll never collapse. Therefore we call it below instead of margin; sf-below-{size}. The sizes are defined in variables.scss and go from 1 to 6.

.sf-below-0
.sf-below-1
...
.sf-below-6

Others

We have a bunch of other single utilities that are not generated using a list defined in variables.scss, but are manually added to single-utilities.scss. See the list below;

Selector	Description
sf-align-c	center align text
sf-align-l	left align text
sf-align-r	right align text
sf-border-transparent	make border transparent
sf-block	`display: block`
sf-break-word
sf-break-all
sf-dim-el	set opacity to 60%
sf-dim-el-hover	set opacity to 60% but only on hover
sf-truncate
sf-not-allowed	sets ‘not-allowed’ cursor and removes pointer events
sf-fill	see Colors - Fill & stroke (SVG)
sf-full	sets width to 100%
sf-full-width	sets with to 100%
sf-full-height	sets height to 100% - mostly used in combination with `.sf-row-eq-height` (see Grid component)
sf-hidden	hides an element using `display: none`
sf-invisible	hides an element using opacity
sf-line-height	sets default line-height
sf-no-border
sf-noscroll
sf-nowrap
sf-num-width	sets a min-width used for numbers so they don’t break
sf-overflow-hidden
sf-overflow-scroll
sf-small	sets width to 70% - used for large chunks of text
sf-stroke	see Colors - Fill & stroke (SVG)
sf-pointer	adds pointer cursor
sf-inline
sf-inline-block
sf-animation-zoom	adds subtle animation

Elements

Alert

⚠ WARNING: Deprecated ⚠
You probably are looking for the banner component instead. If you are working on a feature using the outdated styling please notify the design team.

Lorem ipsum dolor sit amet...

<div class="sf-alert sf-alert-primary sf-alert-large sf-below-2">
  Lorem ipsum dolor sit amet...
</div>

<div class="sf-alert sf-alert-danger sf-below-2">
  Lorem ipsum dolor sit amet...
</div>

<div class="sf-alert sf-alert-warning sf-below-2">
  Lorem ipsum dolor sit amet...
</div>

<div class="sf-alert sf-alert-success">
  Lorem ipsum dolor sit amet...
</div>

System level

Page level

Inline level

Inline level link

Long text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h3>System level</h3>

<div class="sf-banner sf-banner-system-danger sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-exclamation-circle"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-system-warning sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-warning"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-system-success sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-system-info sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-system-neutral sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<h3>Page level</h3>

<div class="sf-banner sf-banner-page-danger sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-exclamation-circle"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-page-warning sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-warning"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-page-success sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-page-info sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<div class="sf-banner sf-banner-page-neutral sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-check"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Title</span>
      <span class="sf-banner-description">Description</span>
      <span class="sf-banner-link">Visit this <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

<h3>Inline level</h3>

<div class="sf-banner sf-banner-inline-danger sf-banner-inline-danger--hoverable">
  <span class="sf-banner-icon fa fa-exclamation-circle"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <i class="fa fa-chevron-right"></i>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-warning sf-banner-inline-warning--hoverable">
  <span class="sf-banner-icon fa fa-warning"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <i class="fa fa-chevron-right"></i>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-success sf-banner-inline-success--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <i class="fa fa-chevron-right"></i>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-info sf-banner-inline-info--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <i class="fa fa-chevron-right"></i>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-neutral sf-banner-inline-info--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <i class="fa fa-chevron-right"></i>
    </div>
  </div>
</div>

<h3>Inline level link</h3>

<div class="sf-banner sf-banner-inline-danger sf-banner-inline-danger--hoverable">
  <span class="sf-banner-icon fa fa-exclamation-circle"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <span class="sf-banner-link"><a href="https://www.google.com">link</a></span>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-warning sf-banner-inline-warning--hoverable">
  <span class="sf-banner-icon fa fa-warning"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <span class="sf-banner-link"><a href="https://www.google.com">link</a></span>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-success sf-banner-inline-success--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <span class="sf-banner-link"><a href="https://www.google.com">link</a></span>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-info sf-banner-inline-info--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <span class="sf-banner-link"><a href="https://www.google.com">link</a></span>
    </div>
  </div>
</div>

<div class="sf-banner sf-banner-inline-neutral sf-banner-inline-neutral--hoverable">
  <span class="sf-banner-icon fa fa-check"></span>
  <span class="sf-banner-title">Title</span>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <span class="sf-banner-link"><a href="https://www.google.com">link</a></span>
    </div>
  </div>
</div>

<h3>Long text</h3>

<div class="sf-banner sf-banner-page-info sf-banner-long-text sf-banner-info sf-below-2">
  <div class="sf-banner-left">
    <span class="sf-banner-icon fa fa-info-circle"></span>
    <span class="sf-banner-text">
      <span class="sf-banner-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
      <span class="sf-banner-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
      <span class="sf-banner-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="https://www.google.com">link</a></span>
    </span>
  </div>
  <div class="sf-banner-right">
    <div class="sf-banner-actions">
      <a class="sf-btn" href="https://www.google.com">Action 1</a>
      <a class="sf-btn" href="https://www.google.com">Action 2</a>
    </div>
    <span class="sf-banner-close fa fa-times"></span>
  </div>
</div>

This period is locked.
Data manually entered into templates cannot be changed, however any numbers synced from the bookkeeping system remain live.

Lock permanently Unlock

<div class="sf-bg-text-lighter sf-layer-rounded sf-pad-h-2 sf-pad-v-1 sf-below-2">
  <div class="sf-level sf-level-between sf-full">
    <div class="sf-level"><span><b>This period is locked.</b><br>Data manually entered into templates cannot be changed,
        however any numbers synced from the bookkeeping system remain live.<br></span></div>
    <div class="sf-level"><a class="sf-level sf-btn"
        href="#"><span>Lock permanently</span></a><a
        class="sf-level sf-btn"
        href="#"><span>Unlock</span></a></div>
  </div>
</div>

Bubble

<div class="sf-level">
  <div class="sf-bubble"></div>
  <div class="sf-bubble sf-bubble-dimmed"></div>
  <div class="sf-bubble sf-bubble-shockwave"></div>
</div>

Button

Colors

Button Button Button Button Button

<div class="sf-level">
  <a href="#" class="sf-btn">Button</a>
  <a href="#" class="sf-btn sf-btn-primary">Button</a>
  <a href="#" class="sf-btn sf-btn-success">Button</a>
  <a href="#" class="sf-btn sf-btn-warning">Button</a>
  <a href="#" class="sf-btn sf-btn-danger">Button</a>
</div>

Types

note: When disabling a button, you are removing all mouse pointer interactions, so even tooltips will not be shown. If you want to have a tooltip, wrap the button in a div and add the tooltip to it.

Button Button Button

<div class="sf-level">
  <a href="#" class="sf-btn sf-btn-primary">Button</a>
  <a href="#" class="sf-btn sf-btn-primary sf-btn-disabled">Button</a>
  <a href="#" class="sf-btn sf-btn-primary sf-btn-small">Button</a>
</div>

Button bar

Submit Submit Submit

Yes No

Submit Submit Submit

<div class="sf-btn-bar sf-below-3">
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
</div>

<div class="sf-btn-bar sf-below-3">
  <a href="#" class="sf-btn">
    <span class="sf-btn-icon-left fa fa-check sf-c-success"></span>
    Yes
  </a>
  <a href="#" class="sf-btn">
    <span class="sf-btn-icon-left fa fa-times sf-c-danger"></span>
    No
  </a>
</div>

<div class="sf-btn-bar sf-below-3">
  <a href="#" class="sf-btn">
    Yes
    <span class="sf-btn-icon-right fa fa-check sf-c-success"></span>
  </a>
  <a href="#" class="sf-btn">
    No
    <span class="sf-btn-icon-right fa fa-times sf-c-danger"></span>
  </a>
</div>

<div class="sf-btn-bar sf-btn-bar-primary sf-below-3">
  <a href="#" class="sf-btn sf-btn-active">Submit</a>
  <a href="#" class="sf-btn">Submit</a>
  <a href="#" class="sf-btn">Submit</a>
</div>

<div class="sf-btn-bar sf-btn-bar-subtle">
  <a href="#" class="sf-btn sf-btn-active">Submit</a>
  <a href="#" class="sf-btn">Submit</a>
  <a href="#" class="sf-btn">Submit</a>
</div>

Button group

If you have a group of buttons, you can add space by using the level element.

Submit Submit Submit

<div class="sf-level">
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
  <a href="#" class="sf-btn sf-btn-primary">Submit</a>
</div>

Form elements

Input text

<form class="sf-form sf-form-full">
  <div class="sf-col">
    <div class="sf-form-label">Label</div>
    <input type="text" class="sf-form-input">
    <div class="sf-form-hint">This is a hint</div>
    <div class="sf-form-error">This is an error</div>
  </div>
</form>

Transparent input text

<div class="sf-bg-snow sf-layer-rounded sf-pad-1">
  <input type="text" class="sf-form-input-transparent sf-full" placeholder="Placeholder...">
</div>

Textarea

Label

<div class="sf-form-label">Label</div>
<textarea class="sf-form-textarea"></textarea> <br>
<textarea class="sf-form-textarea sf-form-textarea-small"></textarea>

Select

<div class="sf-level">
  <div class="sf-form-select-wrapper">
    <select class="sf-form-select">
      <option value="">Select option</option>
    </select>
  </div>
  <div class="sf-form-select-wrapper sf-form-select-wrapper-success">
    <select class="sf-form-select">
      <option value="">Select option</option>
    </select>
  </div>
  <div class="sf-form-select-wrapper sf-form-select-wrapper-disabled">
    <select class="sf-form-select">
      <option value="">Select option</option>
    </select>
  </div>
  <div class="sf-form-select-wrapper sf-form-select-wrapper-primary">
    <select class="sf-form-select sf-form-select-small sf-form-select-primary">
      <option value="">Select Option</option>
    </select>
  </div>
</div>

Checkbox

<label class="sf-form-check sf-inline-block">
<input type="checkbox">
<span class="sf-form-check-content">
<span class="sf-form-check-indicator"></span>
</span>
</label>

Radio

<label class="sf-form-check sf-form-check-rounded sf-inline-block">
<input type="checkbox">
<span class="sf-form-check-content">
<span class="sf-form-check-indicator"></span>
</span>
</label>

Todo modifier

<label class="sf-form-check sf-form-check-todo sf-inline-block">
<input type="checkbox">
<span class="sf-form-check-content">
<span class="sf-form-check-indicator"></span>
</span>
</label>

Label

Label Label Label Label Label Label Label Label Label

<div class="sf-level">
  <span class="sf-label">Label</span>
  <span class="sf-label sf-label-primary">Label</span>
  <span class="sf-label sf-label-primary sf-label-active">Label</span>
  <span class="sf-label sf-label-secondary">Label</span>
  <span class="sf-label sf-label-warning">Label</span>
  <span class="sf-label sf-label-warning sf-label-active">Label</span>
  <span class="sf-label sf-label-danger">Label</span>
  <span class="sf-label sf-label-danger sf-label-active">Label</span>
  <span class="sf-label sf-label-rectangular">Label</span>
</div>

Layer styles

Layers styles are styles that can be shared across multiple elements, to achieve one maintainable style. The same principle as shared layer styles in Photoshop/Sketch.

You can modify layers via /elements/layer.scss. Always use sf-layer- as a prefix.

.sf-layer-white
.sf-layer-rounded
.sf-layer-shadow
.sf-layer-border
.sf-layer-border-bottom
.sf-layer-border-bottom-dark
.sf-layer-button {
.sf-layer-button-haf
.sf-layer-empty
.sf-layer-gradient

Progress

A progress element can have as many complete bars as you want. Just add an element with class sf-progress-complete and define its width by using inline style. Use single utilities to define the background-color (and text-color if needed).

30%

50%

60%

<div class="sf-progress sf-bg-snow">
  <div class="sf-progress-complete sf-bg-primary" style="width: 30%;">&nbsp;30%</div>
  <div class="sf-progress-complete sf-bg-primary-light" style="width: 20%;">&nbsp;50%</div>
  <div class="sf-progress-complete sf-bg-primary-lighter" style="width: 10%;">&nbsp;60%</div>
</div>

<div class="sf-progress sf-progress-animate sf-bg-snow">
  <div class="sf-progress-complete sf-bg-primary" style="width: 30%;"></div>
</div>

<div class="sf-progress sf-progress-small sf-bg-snow">
  <div class="sf-progress-complete sf-bg-primary" style="width: 30%;"></div>
</div>

<div class="sf-progress sf-progress-tiny sf-bg-snow">
  <div class="sf-progress-complete sf-bg-primary" style="width: 30%;"></div>
</div>

Spinner

Color variations

<div class="sf-level">
  <div class="sf-spinner"></div>
  <div class="sf-spinner sf-spinner-primary"></div>
  <div class="sf-spinner sf-spinner-secondary"></div>
  <div class="sf-spinner sf-spinner-success"></div>
  <div class="sf-spinner sf-spinner-warning"></div>
  <div class="sf-spinner sf-spinner-danger"></div>
</div>

Size modifier

<div class="sf-spinner sf-spinner-primary sf-spinner-l"></div>

Components

Grid

Fluid

By default, the grid has a width of 1100px. You can edit the value in components/grid.scss. If you want the grid to be fluid, you can add the class .sf-grid-fluid.

Gutter sizes

sf-grid-gutter-small sf-grid-gutter-medium sf-grid-gutter-large

Breakpoints

sf-xs-... sf-sm-... sf-md-... sf-lg-...

Single utilities

Some of the single utilities also have a responsive behaviour.

.sf-col

  <div class="sf-grid">
    <div class="sf-row">
      <div class="sf-col">
        <div>.sf-col</div>
      </div>
      <div class="sf-col">
        <div>.sf-col</div>
      </div>
      <div class="sf-col">
        <div>.sf-col</div>
      </div>
    </div>
  </div>

.col

  <div class="sf-grid sf-grid-gutter-large">
    <div class="sf-row">
      <div class="sf-col">
        <div>.col</div>
      </div>
      <div class="sf-col">
        <div>.col</div>
      </div>
      <div class="sf-col">
        <div>.col</div>
      </div>
    </div>
  </div>

.col .xs-8

.col

  <div class="sf-grid">
    <div class="sf-row">
      <div class="sf-col sf-xs-8">
        <div>.col .xs-8</div>
      </div>
      <div class="sf-col">
        <div>.col</div>
      </div>
    </div>
  </div>

Level

Use the level-component if you want to vertically center elements next to each other.

Each direct child of the level class is automatically considered a level-item. If you want to specify the items yourself, you can use sf-level-items together with sf-level-item.

item

<div class="sf-level">
  <div>item</div>
  <div>item</div>
</div>

item

<div class="sf-level sf-level-items">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

Modifiers

item

<!-- sf-level-left is applied by default -->
<div class="sf-level sf-level-left">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

item

<div class="sf-level sf-level-right">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

item

<div class="sf-level sf-level-around">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

item

<div class="sf-level sf-level-between">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

item

<div class="sf-level sf-level-center">
  <div class="sf-level-item">item</div>
  <div class="sf-level-item">item</div>
</div>

Sizes

Between each level item, there’s some space. You can tweak the size of this space by using the follow size modifiers; sf-level-small sf-level-medium sf-level-large

Note: this only works when using sf-level-items with sf-level-item

modal-content is the actual modal without any visual style.

Sizes

.modal-xs .modal-s .modal-m .modal-l

Styles

.modal-white .modal-state

Position

.modal-top

Centered content by default. Can also change content alignment with .sf-modal-footer-align-left or .sf-modal-footer-align-left. Children get an automatic margin left of 24px.

<div class="sf-bg-snow">
  <!-- Modal -->
  <div class="sf-modal-white sf-modal-top sf-modal-m">
    <!-- <div class="sf-modal-backdrop"></div> -->
    <div class="sf-modal-container sf-below3">
      <div class="sf-modal-inner">
        <div class="sf-modal-header">
          <div class="sf-modal-back"></div> <!-- add .sf-invisible to hide -->
          <div class="sf-modal-title">
            Title
          </div>
          <div class="sf-modal-close"></div>
        </div>
        <div class="sf-modal-messages">
          <div class="sf-modal-message">
            Default
          </div>
          <div class="sf-modal-message sf-modal-message-success">
            Success
          </div>
          <div class="sf-modal-message sf-modal-message-warning">
            Warning
          </div>
          <div class="sf-modal-message sf-modal-message-error">
            Error
          </div>
          <div class="sf-modal-message sf-modal-message-info">
            Info
          </div>
        </div>
        <div class="sf-modal-content sf-pad-3">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        <div class="sf-modal-footer">
          <a href="#" class="sf-btn sf-btn-success">Agree</a>
          <a href="#" class="sf-btn sf-btn-danger">Disagree</a>
        </div>
      </div>
    </div>

  </div>
  <!-- / Modal -->
</div>

Tab

Accounts
Document
Document

Document
Document

Documents
Document
Document

<ul class="sf-tab sf-below-3">
  <li class="sf-tab-label">Accounts</li>
  <li class="sf-tab-item">Document</li>
  <li class="sf-tab-item">Document</li>
</ul>

<ul class="sf-tab sf-tab-icons sf-below-3">
  <li class="sf-tab-item">
    <span class="sf-tab-item-icon fa fa-file-o"></span>
    Document
  </li>
  <li class="sf-tab-item">Document</li>
</ul>

<ul class="sf-tab sf-tab-icons">
  <li class="sf-tab-label">Documents</li>
  <li class="sf-tab-item">
    <span class="sf-tab-item-icon fa fa-file-o"></span>
    Document
  </li>
  <li class="sf-tab-item">Document</li>
</ul>

Table

For a regular table, you can just use sf-table. Most tables in the Silverfin application use a bordered table, which you can become by adding the modifier sf-table-bordered.

Col 1	Col 2
Content 1	Content 2

<table class="sf-table sf-table-border">
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
</table>

Modifiers

Selector	Description
sf-table-collapse
sf-table-middle td
sf-table-break-words td
sf-table-tbody-break-words td body
sf-table-td-narrow	sets width to `1px`
sf-table-ignore-border	ignores the right border
sf-table-top td	`vertical-align: top;`
sf-table-middle td	`vertical-align: middle;`
sf-table-bottom td	`vertical-align: bottom;`

Extra modifiers

Col 1
Title
Subtitle
Account group
Account group
Account name

<table class="sf-table sf-table-border">
  <tr>
    <th>Col 1</th>
  </tr>
  <tr>
    <td class="sf-table-title">Title</td>
  </tr>
  <tr>
    <td class="sf-table-subtitle">Subtitle</td>
  </tr>
  <tr>
    <td class="sf-table-indent-first">Account group</td>
  </tr>
  <tr>
    <td class="sf-table-indent-first">Account group</td>
  </tr>
  <tr>
    <td class="sf-table-indent-second">Account name</td>
  </tr>
</table>

Selector	Description
sf-table-title
sf-table-subtitle
sf-table-indent-first	note that it’s best to do this using inline CSS; `padding-left: 8px * {level}`
sf-table-indent-second	note that it’s best to do this using inline CSS; `padding-left: 8px * {level}`

Communication cards

For communication cards, please visit the detailed example; https://storage.googleapis.com/sf-ui-kit-cfa43499/examples/commcards.html

Communication form errors

Used to display form errors (for the text field, for now) for communication items (remarks/comments).

Remarks

<div>
  <form class="sf-form sf-form-full sf-pad-3 sf-below-4 sf-c-text">
    <textarea class="sf-form-textarea sf-required" rows="10" cols="30">Hey @superman!</textarea>
    <div class="sf-comms-form-errors">
      <div class="sf-comms-form-errors-icon">
        <i class="fa fa-times-circle"></i>
      </div>
      <div class="sf-comms-form-errors-list">
        <div>superman cannot be mentioned</div>
      </div>
    </div>
  </form>
</div>

Comments

Joris

2 minutes ago

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Aenean eu leo quam.

Joris

2 minutes ago

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Edit

superman cannot be mentioned

Add attachment(s) Reply

<div id="communication-form-errors">
  <div class="sf-commcard-comments">
    <div class="sf-commcard-post">
      <div class="sf-commcard-post-author">
        <div class="sf-commcard-post-icon">
          <div class="fa fa-bolt"></div>
        </div>
        <div class="sf-commcard-post-name">Joris</div>
        <div class="sf-commcard-post-date">2 minutes ago</div>
      </div>
      <div class="sf-commcard-post-text">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Aenean eu leo quam.
      </div>
    </div>
    <div class="sf-commcard-post">
      <div class="sf-commcard-post-author">
        <div class="sf-commcard-post-name">Joris</div>
        <div class="sf-commcard-post-date">2 minutes ago</div>
      </div>
      <div class="sf-commcard-post-text">
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </div>
      <div class="sf-commcard-post-actions">
        <a href="#">Edit</a>
      </div>
    </div>
  </div>
  <div class="sf-commcard-reply-form">
    <textarea class="sf-commcard-reply-form-textarea sf-required">Hey @superman!</textarea>
    <div class="sf-comms-form-errors">
      <div class="sf-comms-form-errors-icon">
        <i class="fa fa-times-circle"></i>
      </div>
      <div class="sf-comms-form-errors-list">
        <div>superman cannot be mentioned</div>
      </div>
    </div>
  </div>
  <div class="sf-commcard-reply-form-footer">
    <a href="#" class="sf-a sf-font-xs sf-fwdb">Add attachment(s)</a>
    <a href="#" class="sf-btn sf-btn-primary sf-btn-small">Reply</a>
  </div>
</div>

Empty states

For empty states, please visit the detailed example; https://storage.googleapis.com/sf-ui-kit-cfa43499/examples/empty-state.html

Hover interactive

Using the hover component, you can hide elements and only show them on hover. Therefor you need a parent wrapper (which you hover); sf-hover and children which you can hide using sf-hover-item

Button Button Button

<div class="sf-level sf-hover">
  <a href="#" class="sf-btn">Button</a>
  <a href="#" class="sf-btn">Button</a>
  <a href="#" class="sf-btn sf-hover-item">Button</a>
</div>

Periodpicker

See example Periodpicker

Pulse upload button

See example Pulse upload button

<div class="sf-pulse-upload">
  <div class="sf-level">
    <div>Upload file</div>
    <div class="sf-font-l fa fa-cloud-upload"></div>
  </div>
</div>

Steps

Step 1

Step 2

Step 3

<div class="sf-steps">
  <div class="sf-steps-item sf-steps-item-active">
    <span>Step 1</span>
  </div>
  <div class="sf-steps-item">
    <span>Step 2</span>
  </div>
  <div class="sf-steps-item">
    <span>Step 3</span>
  </div>
</div>

Subnav

Foo

<div class="sf-subnav">
  <div class="sf-subnav-inner">
    <div class="sf-subnav-item">
      <a href="#" class="active">
        <span>Foo</span>
      </a>
    </div>
    <div class="sf-subnav-item">
      <a href="#" class="active-parent">
        <span>Foo</span>
      </a>
    </div>
  </div>
</div>

<ul id="tree-menu" class="sf-tree-menu">
  <li class="sf-tree-menu__group">
    <span class="sf-tree-menu__group-title sf-tree-menu__group-title--top-level">
      <i class="fa fa-angle-down sf-tree-menu__group-title-icon"></i>
      <a class="sf-tree-menu__item-link" href="#">
        Group 1
      </a>
    </span>
    <ul class="sf-tree-menu__group-content sf-tree-menu__group-content--top-level">
      <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 1.1</a></li>
      <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 2.1</a></li>
    </ul>
  </li>
  <li class="sf-tree-menu__group">
    <span class="sf-tree-menu__group-title sf-tree-menu__group-title--top-level">
      <i class="fa fa-angle-right sf-tree-menu__group-title-icon"></i>
      <a class="sf-tree-menu__item-link" href="#">
        Group 2
      </a>
    </span>
    <ul class="sf-tree-menu__group-content sf-tree-menu__group-content--top-level sf-tree-menu__group-content--collapsed">
      <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 2.1</a></li>
      <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 2.2</a></li>
    </ul>
  </li>
  <li class="sf-tree-menu__group">
    <span class="sf-tree-menu__group-title sf-tree-menu__group-title--top-level">
      <i class="fa fa-angle-down sf-tree-menu__group-title-icon"></i>
      <a class="sf-tree-menu__item-link" href="#">
        Group 3
      </a>
    </span>
    <ul class="sf-tree-menu__group-content sf-tree-menu__group-content--top-level">
      <li class="sf-tree-menu__group">
        <span class="sf-tree-menu__group-title">
          <i class="fa fa-angle-down sf-tree-menu__group-title-icon"></i>
          <a class="sf-tree-menu__item-link" href="#">
            Subgroup 3.1
          </a>
        </span>
        <ul class="sf-tree-menu__group-content">
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.1.1</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.1.2</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.1.3</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.1.4</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.1.5</a></li>
        </ul>
      </li>
      <li class="sf-tree-menu__group">
        <span class="sf-tree-menu__group-title">
          <i class="fa fa-angle-down sf-tree-menu__group-title-icon"></i>
          <a class="sf-tree-menu__item-link" href="#">
            Subgroup 3.2
          </a>
        </span>
        <ul class="sf-tree-menu__group-content">
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.2.1</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.2.2</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.2.3</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.2.4</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.2.5</a></li>
        </ul>
      </li>
      <li class="sf-tree-menu__group">
        <span class="sf-tree-menu__group-title">
          <i class="fa fa-angle-down sf-tree-menu__group-title-icon"></i>
          <a class="sf-tree-menu__item-link" href="#">
            Subgroup 3.3
          </a>
        </span>
        <ul class="sf-tree-menu__group-content">
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.3.1</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.3.2</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.3.3</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.3.4</a></li>
          <li class="sf-tree-menu__item"><a class="sf-tree-menu__item-link" href="#">Link 3.3.5</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Foo

<div class="sf-subnav sf-subnav-fluid">
  <div class="sf-subnav-inner">
    <div class="sf-subnav-item">
      <a href="#" class="active">
        <span>Foo</span>
      </a>
    </div>
    <div class="sf-subnav-item">
      <a href="#" class="active-parent">
        <span>Foo</span>
      </a>
    </div>
  </div>
</div>

Foo

<div class="sf-subnav sf-subnav-boxed">
  <div class="sf-subnav-inner">
    <div class="sf-subnav-item">
      <a href="#" class="active">
        <span>Foo</span>
      </a>
    </div>
    <div class="sf-subnav-item">
      <a href="#" class="active-parent">
        <span>Foo</span>
      </a>
    </div>
  </div>
</div>

Cards

Budget card

Basic Report (English)139

Charts

Edit

Created

on 06/01/2021

Lasted edited

on 06/01/2021

<div class="sf-layer-rounded sf-layer-border sf-bg-white sf-overflow-hidden sf-hover sf-below-2">
  <table class="sf-table sf-table-middle sf-table-collapse">
    <tbody>
      <tr>
        <td class="sf-bg-success-subtle sf-pad-3 sf-c-success sf-font-m" width="1">
          <div class="fa fa-eye"></div>
        </td>
        <td class="sf-pad-3">
          <div class="sf-level sf-level-between sf-below-2">
            <div class="sf-level"><a class="sf-font-l sf-title"
                href="#">Basic Report (English)</a><span
                class="sf-label sf-label-danger sf-label-active"
                >139</span></div>
            <div class="sf-level">
              <a class="sf-btn" href="#">
                Charts
                <div class="sf-label sf-label-active sf-no-border sf-ml-1">9</div>
              </a>
              <a class="sf-btn" href="#">Edit</a>
            </div>
          </div>
          <hr class="sf-hr sf-below-2">
          <div class="sf-level">
            <div class="sf-level-item">
              <div class="sf-c-text sf-font-normal sf-inline">Created </div><span
                class="sf-c-text-dark sf-font-normal">on 06/01/2021</span>
            </div>
            <div class="sf-level-item">
              <div class="sf-c-text sf-font-normal sf-inline">Lasted edited </div><span
                class="sf-c-text-dark sf-font-normal">on 06/01/2021</span>
            </div>
            <div class="sf-level-item"><strong><span class="icon icon-comment sf-font-s sf-c-text-dark"
                  data-toggle="tooltip" title="" data-original-title="2 notes"></span></strong> 2</div>
            <div class="sf-level-item"></div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Content card

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet vehicula erat, vitae viverra ex. Nullam non scelerisque ex. Curabitur porttitor risus sem, in porttitor purus faucibus eleifend. Duis tempus risus sit amet velit facilisis congue. Phasellus in tortor elementum, sagittis ex nec, cursus lectus. Nunc vestibulum augue id turpis mollis, vitae pellentesque lacus interdum. Morbi convallis, tortor quis convallis viverra, magna quam gravida justo, non hendrerit metus nisl nec quam. Nulla scelerisque ornare lacus, in lobortis mauris iaculis vitae. Nunc euismod nulla eu eros gravida, quis tincidunt orci accumsan.

<div class="sf-content-card">
  <div class="sf-content-card-title">
    <div class="sf-content-card-icon-container">
      <img
        class="sf-content-card-icon"
        src="https://storage.googleapis.com/sf-ui-kit-cfa43499/images/cards/content-card-icon.svg"
        alt=""
      />
    </div>
    <div>
      <div class="sf-content-card-title-primary">
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit..."
      </div>
      <div class="sf-content-card-title-secondary">
        "There is no one who loves pain itself, who seeks after it and wants to
        have it, simply because it is pain..."
      </div>
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet
    vehicula erat, vitae viverra ex. Nullam non scelerisque ex. Curabitur
    porttitor risus sem, in porttitor purus faucibus eleifend. Duis tempus risus
    sit amet velit facilisis congue. Phasellus in tortor elementum, sagittis ex
    nec, cursus lectus. Nunc vestibulum augue id turpis mollis, vitae
    pellentesque lacus interdum. Morbi convallis, tortor quis convallis viverra,
    magna quam gravida justo, non hendrerit metus nisl nec quam. Nulla
    scelerisque ornare lacus, in lobortis mauris iaculis vitae. Nunc euismod
    nulla eu eros gravida, quis tincidunt orci accumsan.
  </div>
</div>

Textcard

Permanent Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vero nesciunt pariatur blanditiis voluptate provident perferendis placeat molestias cum totam, ipsum error ullam similique eum minima eius fugiat saepe ab? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi adipisci est rem magni ullam laborum? Facere, tempore atque id, aliquam animi dolorum eum ducimus numquam, soluta asperiores sed placeat ea.

Last edited by Tim on 18 Oct

Valid until Q2 2019

<div class="sf-textcard" style="float: none">
  <div class="sf-textcard-title">Permanent Text</div>
  <div class="sf-textcard-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vero nesciunt pariatur blanditiis voluptate provident perferendis placeat molestias cum totam, ipsum error ullam similique eum minima eius fugiat saepe ab? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi adipisci est rem magni ullam laborum? Facere, tempore atque id, aliquam animi dolorum eum ducimus numquam, soluta asperiores sed placeat ea.</div>
  <div class="sf-textcard-footer">
    <div class="sf-textcard-comments">
      <div class="sf-level sf-level-small sf-c-primary">
        <span class="sf-level-item">3</span>
        <span class="sf-level-item fa fa-comment"></span>
      </div>
    </div>
    <div class="sf-textcard-update">
      Last edited by Tim on 18 Oct
    </div>
    <div class="sf-textcard-period">
      Valid until Q2 2019
    </div>
  </div>
</div>

List

Lorem Ipsum

9/18/2023
Lorem Ipsum

9/18/2023
Lorem Ipsum

9/18/2023
Lorem Ipsum
Lorem Ipsum

9/18/2023
Lorem Ipsum

Button

<ul class="sf-list">
  <li class="sf-list__item sf-list__item--selected sf-list__item--tall">
    <div class="sf-list__item-content sf-list__item-content--left">
      <a href="#" class="sf-list__link">
        <div class="sf-list__icon">
          <span class="sf-banner-icon fa fa-exclamation-circle"></span>
        </div>
        <span class="sf-list__text"> Lorem Ipsum</span>
      </a>
    </div>
    <div class="sf-list__item-content sf-list__item-content--right">
      9/18/2023
    </div>
  </li>
  <li class="sf-list__item sf-list__item sf-list__item--cornered sf-list__item--tall-wide">
    <div class="sf-list__item-content sf-list__item-content--left">
      <div class="sf-list__icon">
        <span class="sf-banner-icon fa fa-exclamation-circle"></span>
      </div>
      <span class="sf-list__text"> Lorem Ipsum</span>
    </div>
    <div class="sf-list__item-content sf-list__item-content--right">
      9/18/2023
    </div>
  </li>
  <li class="sf-list__item sf-list__item--cornered sf-list__item--short">
    <div class="sf-list__item-content sf-list__item-content--left">
      <a href="#" class="sf-list__link">
        <span class="sf-list__text"> Lorem Ipsum</span>
      </a>
    </div>
    <div class="sf-list__item-content sf-list__item-content--right">
      9/18/2023
    </div>
  </li>
  <li class="sf-list__item sf-list__item--short-wide">
    <div class="sf-list__item-content sf-list__item-content--left">
      <span class="sf-list__text"> Lorem Ipsum</span>
    </div>
  </li>
  <li class="sf-list__item">
    <div class="sf-list__item-content sf-list__item-content--left">
      <span class="sf-list__text"> Lorem Ipsum</span>
    </div>
    <div class="sf-list__item-content sf-list__item-content--right">
      9/18/2023
    </div>
  </li>
  <li class="sf-list__item sf-list__item--small">
    <div class="sf-list__item-content sf-list__item-content--left">
      <div class="sf-list__icon">
        <span class="sf-banner-icon fa fa-exclamation-circle"></span>
      </div>
      <span class="sf-list__text"> Lorem Ipsum</span>
    </div>
    <div class="sf-list__item-content sf-list__item-content--right">
      <a href="#" class="sf-btn sf-btn-small">Button</a>
    </div>
  </li>
</ul>

Introduction

Installation

Usage

Development

Naming conventions

text

General classes

What are single utilities?

Typography

Font sizes

Line heights

Font weight

Decoration

Color

Text-color

Background-color

Fill & stroke (SVG)

Padding

Margin

Others

Alert

Banner

System level

Page level

Inline level

Inline level link

Long text

Bubble

Button

Colors

Types

Button bar

Button group

Form elements

Input text

Transparent input text

Textarea

Select

Checkbox

Radio

Todo modifier

Label

Layer styles

Progress

Spinner

Color variations

Size modifier

Grid

Fluid

Gutter sizes

Breakpoints

Single utilities

Level

Modifiers

Sizes

Modal

Sizes

Styles

Position

Footer alignment

Tab

Table

Modifiers

Extra modifiers

Communication cards

Communication form errors

Remarks

Comments

Empty states

Hover interactive

Periodpicker

Pulse upload button

Steps

Subnav

Tree menu

Cards

Budget card

Content card

Textcard

List