Splitter
A splitter is a creative separator between two content areas.
Variations
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Component used in
Page template
Compound components
Details
Usage
A splitter is a dividing component, it is used to introduce a new page section while also giving some structure to the page content.
Guidelines
- Maximum number of characters recommended:
- 75 characters for the title (
h3) - 280 characters for the paragraph (
p)
- 75 characters for the title (
HTML structure
Overall HTML view of a splitter component:
div.splitter
div.content-box
h3 (optional)p (optional)Presets
Splitter presets:
| Preset | Description |
|---|---|
| Default | Default template. |
Presets are ready to use HTML structures.
Variations
Splitter variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of one title and a description. |
| Just title | This snippet is composed of one title. |
| Just paragraph | This snippet is composed of a block of text. |
Modifiers
Splitter classes:
| Class | Description |
|---|---|
-dark-blue | Changes the background colour to dark blue. |
-top-arrow, -bottom-arrow | Adds an arrow either on the top of the component or on the bottom. |
-euro-watermark | Adds a euro sign watermark to the background. |
-mirrored | Flips the position of the watermarks if enabled. |
-no-space-below | Removes component margin bottom. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The splitter component cannot be embedded inside other component.
main (HTML file)
div.splitterNesting
The splitter component cannot be used as a container of other components and/or elements.
main (HTML file)
div.splitter