Aside

The aside layout is made to display additional info on the left side of the content. It uses CSS grid on screen larger then tablet. The aside can have a highlighted item wich is placed on the top of the aside.

Default

px 

			
				<div class="l-aside">
	<div class="l-aside__container">
		<div class="l-aside__content">Content</div>
		<div class="l-aside__info">Info</div>
	</div>
</div>

Highlight

px 

			
				<div class="l-aside l-aside--with-highlight">
	<div class="l-aside__container">
		<div class="l-aside__highlight">Highlight</div>
		<div class="l-aside__content">Content</div>
		<div class="l-aside__info">Info</div>
	</div>
</div>

_aside reverse

px 

			
				<div class="l-aside l-aside--reverse">
	<div class="l-aside__container">
		<div class="l-aside__content">Content</div>
		<div class="l-aside__info">Info</div>
	</div>
</div>

Documentation

Modifiers

  • l-aside--with-highlight

    Used to display the highlight component in the css grid and to position the additional info.