Overview

DANGER

The usage of UI-kit is considered DEPRECATED. For all your styling needs you should utilize Tailwind CSS instead.

INFO

You can still use any of the element specific styling classes (all sections after the Elements section in this overview) until these elements are ported over to individual Rails & Vue components.

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 yarn

yarn install silverfin-ui-kit

Development

You need run the following:

yarn install
yarn run docs:dev

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.

<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

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

some text

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.

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

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

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.

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

Light

Normal

Medium

Bold

Decoration

You can apply some modifier to text-elements.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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 TODO

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

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

TextTextTextTextText

Background-color

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

TextTextTextTextText

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>

// using sf-fill will fill the shape with the primary color // using sf-stroke will make the stroke use the primary color

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

Other Utilities

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

Button

Colors

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

ButtonButtonButtonButtonButton

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.

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

ButtonButtonButton

Button bar

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

SubmitSubmitSubmit

Yes No

Yes No

SubmitSubmitSubmit

SubmitSubmitSubmit

Button group

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

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

SubmitSubmitSubmit

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>

Label

This is a hint

This is an error

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

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

Label

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>

Select option

Select option

Select option

Select Option

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

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

LabelLabelLabelLabelLabelLabelLabelLabelLabel

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

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

 30%

 50%

 60%

<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-smallsf-grid-gutter-mediumsf-grid-gutter-large

Breakpoints

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

Single utilities

Some of the single utilities also have a responsive behaviour.

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

.sf-col

.sf-col

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

.col

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

.col .xs-8

.col

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

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

item

item

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

item

item

Modifiers

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

item

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

item

item

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

item

item

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

item

item

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

item

item

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-smallsf-level-mediumsf-level-large

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

Modal

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

Footer alignment

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>

Title

Default

Success

Warning

Error

Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

AgreeDisagree

Tab

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

• Accounts
• Document
• Document

• Document
• Document

• Documents
• Document
• Document

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.

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

Col 1	Col 2
Content 1	Content 2

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

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

Col 1
Title
Subtitle
Account group
Account group
Account name

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}

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

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

ButtonButtonButton

Steps

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

Step 1

Step 2

Step 3

Subnav

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

Foo

Foo

Tree menu

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

• Group 1
  • Link 1.1
  • Link 2.1
• Group 2
  • Link 2.1
  • Link 2.2
• Group 3
  • Subgroup 3.1
    • Link 3.1.1
    • Link 3.1.2
    • Link 3.1.3
    • Link 3.1.4
    • Link 3.1.5
  • Subgroup 3.2
    • Link 3.2.1
    • Link 3.2.2
    • Link 3.2.3
    • Link 3.2.4
    • Link 3.2.5
  • Subgroup 3.3
    • Link 3.3.1
    • Link 3.3.2
    • Link 3.3.3
    • Link 3.3.4
    • Link 3.3.5

List

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

• 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