Skip to content

Split13.10.5

The Split Component is used to divide up content heavy pages.


$ npm i @if-design-system/split@13.10.5

Edit this section

Overview

The Split Component is used to divide up content heavy pages. It concists of two boxes with text and image.

Edit this section

Usage

Principles

Stacking

The split component can be stacked.

Drulleförsäkringen

Allriskförsäkring, drulleförsäkring eller otursförsäkring – oavsett vad du kallar det så är det en försäkring som hjälper dig när du haft lite otur och till exempel välter kaffekoppen över datorn eller tappar solglasögonen i havet.

Läs mer om vår drulleförsäkring

Drulleförsäkringen

Allriskförsäkring, drulleförsäkring eller otursförsäkring – oavsett vad du kallar det så är det en försäkring som hjälper dig när du haft lite otur och till exempel välter kaffekoppen över datorn eller tappar solglasögonen i havet.

Läs mer om vår drulleförsäkring
<div class="if split [small]"></div>
<div class="if split [small]"></div>

Both the small and default Split Component stacks equally in smaller screens.

Sizing

The default Split Component is full width of the viewport, allways. It resembles the Hero Component in that way.

  1. Full width of viewport

The small Split Component is full width of the default container.

  1. Full width of container
Edit this section

Behaviours

Modifiers

Reverse

The Split Component can be reversed.

<div class="if split reverse"></div>

It can be reverse and stacked.

<div class="if split reverse"></div>
<div class="if split"></div>

Fills

The Split Component can have different fills. Default is light.

Light
  1. The default fill is BE 5, LIGHTEST BEIGE.
Dark
  1. The dark fill is BE 4, LIGHTER BEIGE.
Darker
  1. The darker fill is BE 3, LIGHT BEIGE.
Darkest
  1. The darkest fill is BE 1, DARK BEIGE.
<div class="if split [light|dark|darker|darkest]"></div>

Small

<div class="if split small"></div>

Studio

You can also use a studio image!

<div class="if split studio small"></div>
Reverse
<div class="if split small reverse"></div>
Default fills

The small Split Component can have different fills. Default is light or a fill dictated by the parent if block [dark|darker].

In default block
In dark block
In darker block
Edit this section

Anatomy

  1. Title
  2. Text
  3. Actions
  4. Image

Image

The image used in Split Component is either a lifestyle or a studio image.

Title

<h2 class="if heading medium">Title</h2>
<!-- Or -->
<span class="if heading smallest"></span>

The title can be any heading style and tag.

Text

The text content is always wrapped in a if text body-paragraph(s)

Actions

The action can be a link or a link styled as a primary button.

NOTE It's recommended to only have one action in the Split Component

Use one action in the Split Component.
Do not use two actions in the Split Component.
Do not use two actions in the Split Component.
Edit this section

Specs

Edit this section

Implementation

<div class="if split [reverse|small [light|dark|darker|darkest]]">
  <div class="if container">
    <div class="if content">
      <h2 class="if heading medium">
        Drulleförsäkringen
      </h2>
      <p class="if text body">
        Allriskförsäkring, drulleförsäkring eller otursförsäkring – oavsett vad du kallar det så är det en försäkring
        som hjälper dig när du haft lite otur och till exempel välter kaffekoppen över datorn eller tappar solglasögonen
        i havet.
      </p>
      <a href="/asdasd" class="if standalone">Läs mer om vår drulleförsäkring</a>
    </div>
    <div class="if image" style="background-image: url(https://v.imgi.no/aafg2z8bhs-MOODBOARD/2042);"></div>
  </div>
</div>
Edit this section

Contact us