Sections
Style
A section style is mainly expressed by the given background color.
You should make sure that the chosen background color always offers enough contrast to display various font colors!
| Setting | Token | Description | |
|---|---|---|---|
default | --l-section--background-default | The default background color, shouldnt be percieved as a distinct surface | |
bold | --l-section--background-bold | A very prevelant color heavily drawing focus to the displayed content | |
accent | --l-section--background-accent | A light color, making it disctinct from the default background without being too heavy |
Frame Width
The width propertiy determines the with of the frame the content will be displayed in.
| Setting | Token | Application |
|---|---|---|
default | --l-section--content-width-default | The default frame width |
narrow | --l-section--content-width-narrow | A narrow frame width |
wide | --l-section--content-width-wide | A wide frame width |
max | --l-section--content-width-max | The content spans over the entiere screen |
full | --l-section--content-width-full | The content spans over the entiere screen, without content-padding |
Screen spanning layouts
For creating full screen layouts there are options of max and full.
They both state that the frame spans over the entire screen.
The max option still leaves content-padding to the left and right browser border.
With the full option the content will be placed directly against the browser border.
Space Before / Space After
Determines how much vertical spacing a section has.
| Setting | Preview | Token | Application |
|---|---|---|---|
default | --l-section--space-default | The default section spacing ensuring an even rythm | |
small | --l-section--space-small | A smaller space between Sections | |
none | --- | No space between Sections |
Combining spacings
By combining the given spaceAfter/spaceBefore options, it's possible to move sections closer together.
That way you can create a visual connection between the content in two sections.
You can even make them seem as a single element by removing all spacing between them.
Mode
default
The children will be placed next to each other, stretched across the full section width.
tile
The children will be placed next to each other, in a pre set column width.
list
The children will be placed on top of each other, stretched across the full section width.
Gutter
| Setting | Token | Application |
|---|---|---|
none | --- | No space between children |
small | --l-section--gutter-small | A small space between children |
default | --l-section--gutter | The default spacing between children, ensuring an even rythm |
large | --l-section--gutter-large | A large space between children |
none
small
default
large
Examples
List
mode: list
How can we help you?
Toggle Code
_69<Section_69 mode="list"_69 headline={{_69 styleAs: 'h2',_69 content: 'How can we help you?',_69 align: 'center',_69 spaceAfter: `small`,_69 }}_69>_69 <TeaserRow_69 topic="Generators"_69 image="https://www.kickstartds.com/img/recipes/generator.svg"_69 ratio="none"_69 text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."_69 link={{_69 variant: 'solid',_69 label: 'Explore generators',_69 iconAfter: false,_69 icon: {_69 icon: 'chevron-right',_69 },_69 }}_69 />_69_69 <TeaserRow_69 topic="Components"_69 image="https://www.kickstartds.com/img/recipes/toolbox.svg"_69 ratio="none"_69 text="Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."_69 link={{
Grid
mode: tile
--l-section_col--min-width: 14rem
Choose your component
Toggle Code
_167<Section_167 className="content-nav"_167 width="wide"_167 mode="tile"_167 headline={{_167 styleAs: 'h2',_167 content: 'Choose your component',_167 align: 'center',_167 spaceAfter: 'small',_167 }}_167>_167 <TeaserBox_167 topic="Button"_167 image="https://www.kickstartds.com/img/recipes/icons/button.svg"_167 ratio="none"_167 imageSpacing_167 text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."_167 link={{_167 hidden: true,_167 href: '#',_167 label: 'Explore generators',_167 }}_167 />_167_167 <TeaserBox_167 topic="Content Box"_167 image="https://www.kickstartds.com/img/recipes/icons/content-box.svg"_167 ratio="none"_167 imageSpacing_167 image="https://www.kickstartds.com/img/recipes/icons/quote-slider.svg"
Full Screen
mode: tile
--l-section_col--min-width: 14rem
We help you overcome digital obstacles
Autem voluptas quis facere et qui voluptate earum.
Toggle Code
_38<Section width="full" spaceBefore="none" spaceAfter="none">_38<Storytelling_38 image={{_38 source: 'https://www.kickstartds.com/img/recipes/hero-angled.png',_38 order: {_38 desktopImageLast: true,_38 },_38 }}_38 box={{_38 headline: {_38 level: 'h1',_38 styleAs: 'h1',_38 content: 'We help you overcome digital obstacles',_38 subheadline: 'Autem voluptas quis facere et qui voluptate earum.',_38 },_38 text: `Lorem ipsum dolor sit amet, [consetetur sadipscing](http://example.com/) elitr, sed diam voluptua. At vero eos et accusam et justo duo **dolores et ea rebum.**`,_38 links: [_38 {_38 fillAnimation: false,_38 href: '#',_38 iconAfter: false,_38 iconAnimation: false,_38 iconBefore: false,_38 label: 'Start now',_38 newTab: false,_38 size: 'medium',_38 variant: 'solid',_38 },_38 {_38 href: '#',
Customisation
Customisation is typically done via scss files.
The default token are declared on the .l-section__container selector and can be overritten there.
To increase the selector accuracy, its recommended to wrap them into a :root selector.
KickstartDS Sections use CSS Grid.
The child elements will be placed in columns, which are arranged in rows.
To get deeper into the workings of CSS Grid we recommend this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
The minimum width of a column is determined by --l-section_col--min-width.
The maximum width of a column is determined by --l-section_col--max-width.
The default value is 1fr. (Recommended for responsive layouts)
The amount of columns fit in one row is determined by --l-section_col--repeat.
The default value is auto-fit. (Recommended for responsive layouts)
Fill Space
If you want the available space to be efficiently used, it is recommended to leave the max-width token set to its default value of 1fr.
--l-section_col--min-width: 5rem
Fixed Width
If you dont want your elements to fill the available space, you can set a max-width value in addition to min-width.
--l-section_col--min-width: 5rem
--l-section_col--max-width: 10rem
Scaling Width
By using a percentage on the min-width token, you can create a scaling layout.
It will keep its proportions, no matter the screen size.
--l-section_col--min-width: 40%
Set Columns Amount
If you use a custom value, make sure the columns do not exceed the avialable space in your layout (especially on narrow screens).
You can do so by balancing out the min-width in correspondence to the set column amount.
--l-section_col--repeat: 4
--l-section_col--min-width: 5rem