Back to Split-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

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

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/split@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Default markup

<div class="if split">
  <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>

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

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

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 reverse small">
  <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>

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

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

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

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

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 studio">
  <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://if-design-cdn.azureedge.net/images/documentation/studio/If-studio-travel-abroad-IFS-04459_PNG.PNG);"
    ></div>
  </div>
</div>

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)

Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.1 (2021-09-28)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.7.5 (2021-06-01)

Bug Fixes

  • 🐛 Add support for studio images in split (191d603), closes #341887

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

9.3.0 (2021-02-02)

Features

  • 🎸 Treat normal videoes as images in spit component (c638c63), closes #336794

8.0.0 (2020-12-14)

Code Refactoring

  • 💡 Separate and rename block board from hero to split (91a3e4a), closes #318242

BREAKING CHANGES

  • 🧨 The hero block board is now a separate component named Split.
Edit this section, Opens in new window
Contact us, Opens in new window