Split
The Split Component is used to divide up content heavy pages.
Table of Contents
Edit this section, Opens in new windowOverview
The Split Component is used to divide up content heavy pages. It concists of two boxes with text and image.
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äkringDrullefö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äkringBoth 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.
- Full width of viewport
The small Split Component is full width of the default container.
- Full width of container
Behaviours
Modifiers
Reverse
The Split Component can be reversed.
It can be reverse and stacked.
Fills
The Split Component can have different fills. Default is light.
- The default fill is BE 5, LIGHTEST BEIGE.
- The dark fill is BE 4, LIGHTER BEIGE.
- The darker fill is BE 3, LIGHT BEIGE.
- The darkest fill is BE 1, DARK BEIGE.
Small
Studio
You can also use a studio image!
Reverse
Default fills
The small Split Component can have different fills. Default is light or a fill dictated by the
parent if block [dark|darker].
Anatomy
- Title
- Text
- Actions
- Image
Image
The image used in Split Component is either a lifestyle or a studio image.
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