Section

The section layout is used to split up the page in different parts. This does not means is has to be used on a <section> element. This can be used on <div>, <article>, ... . A section component can have different child elements like a header, content and a footer, when using the <section>, a header is mandatory. Each part has their own modifiers to make a section look the way you want too.

This is one of the main elements that should be used when splitting up the page and determining spacing or the way everything like asides is positioned. Following this principle, everything that determines how something is positioned and is visually represented in a certain layout is placed within the same component and not split up in different files.

Default

The default section component can have a header, content and footer. There are optional, depending on the element you use some children are required. For example: when using a <section> the l-section__header is required.

px 

			
				<section class="l-section">
	l-section
	<div class="l-container">
		l-container
		<header class="l-section__header">
			l-section__header
			<h2 class="l-section__title">l-section__title</h2>
		</header>
		<div class="l-section__content">
			l-section__content
		</div>
		<footer class="l-section__footer">
			l-section__footer
		</footer>
	</div>
</section>