Content

The content layout component is primarily used to define spacing between components that are not styled within the same component. It is used to seperate the content from each other.

Default

l-content__item
l-content__item
l-content__item
l-content__item
l-content__item

Multiple

Background colors can be added to the l-content layout. If they are used next to each other they will create the correct spacing:

  • l-content after l-content creates margin
  • l-content--grey (with background color) creates padding
  • l-content--grey after l-content--grey, removes margin and removes padding-top so they stick together
  • l-content after l-content--grey receives margin
  • l-content--grey after l-content receives margin
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item
l-content__item