Content Layout
The Content Layout component defines a column layout.
The layout consists of two columns. The width of the larger 'main' column is in ratio with the font-size of the Typesystem for articles to achieve the optimal line length for readability.
The optional 'sidebar' column is used to hold content related blocks. On smaller devices the 'sidebar' column is placed above or under the 'main' column depending settings or order.
The order of the 'main' column and the 'sidebar' column is strict*:
- When showing text-content the 'sidebar' column should be on the right of the 'main' column.
- When showing list-content the 'sidebar' column should be on the left of the 'main' column.
This component needs to be nested inside the Container component with modifier --column.
* Reverse when reading direction rtl.
With sidebar:
With sidebar (order reversed):
Without sidebar:
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- With sidebar -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
...
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
<!-- With sidebar (order reversed) -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
<div class="vi-content-layout__main">
...
</div>
</div>
<!-- Without sidebar -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
...
</div>
</div>
</div>Sticky sidebar #
When the content column contains a lot of content the sidebar column will
'stick' to the viewport untill the bottom of the .vi-content-layout is reached.
Note that position: sticky will fail if there’s an overflow: hidden or overflow: auto between it and whatever it scrolls inside (body root or nearest ancestor with overflow: scroll)
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
...
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
<div class="vi-content-layout__main">
...
</div>
</div>
</div>Equal width #
While the content-layout component is designed to have a larger main column and a smaller sidebar column, the content-layout--equal modifier can be used to make both columns equal width.
This is useful when the content in both columns is of equal importance. Think login forms, for example.
With sidebar:
With sidebar (order reversed):
Without sidebar:
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- With sidebar -->
<!-- Content Layout (mods: --equal) -->
<div class="vi-content-layout vi-content-layout--equal">
<div class="vi-content-layout__main">
...
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
<!-- With sidebar (order reversed) -->
<!-- Content Layout (mods: --equal) -->
<div class="vi-content-layout vi-content-layout--equal">
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
<div class="vi-content-layout__main">
...
</div>
</div>
<!-- Without sidebar -->
<!-- Content Layout (mods: --equal) -->
<div class="vi-content-layout vi-content-layout--equal">
<div class="vi-content-layout__main">
...
</div>
</div>
</div>Form container #
The .vi-content-layout__form-container is an inset container meant to hold form elements.
It is designed to be placed within the main column, with forms inside it always having a maximum width matching that of an equal-width column.
With sidebar:
With sidebar (order reversed):
Without sidebar:
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- With sidebar -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<div style="border: 1px dashed #ccc;">
<div class="vi-content-layout__form-container">
...
</div>
</div>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
<!-- With sidebar (order reversed) -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
<div class="vi-content-layout__main">
<div style="border: 1px dashed #ccc;">
<div class="vi-content-layout__form-container">
...
</div>
</div>
</div>
</div>
<!-- Without sidebar -->
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<div style="border: 1px dashed #ccc;">
<div class="vi-content-layout__form-container">
...
</div>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 28 June 2022 - Fix scrollparent detector
Added
- 08 Nov 2024 - feat(content-layout): - class
.vi-content-layout__form-container to hold form elements, see form container behavior.
- 08 Nov 2024 - feat(content-layout): - modifier
--equal for equal width behavior.
- 08 Nov 2024 - feat(content-layout): - Updated gapping to modern css.
- Initial draft