Center
Center a container and set a max width of 1200px which is the widest the page should ever be.
<section class="l-center">
Centered content with a max width of 1200px.
</section>
Four Up Layout
Creates a four-column layout using flexbox. The columns stack below breakpoint x-small (~704px). Between breakpoints x-small (~704px) and breakpoint small (~880px) the display shifts to a 2x2 grid
<section class="l-four-up">
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
Grid
Create a dynamic 1, 2, 3 or 4 column grid.
<div class="l-grid__wrapper">
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-half" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-half" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
</div>
Offset Two-Column Layout
This layout is used on the Stories content type.
<div class="l-offset-2">
<div class="l-offset-2__left-column">
<div class="l-offset-2__inner" style="{{ kss_inline_styles_offset1 }}">{{ paragraph1 }}</div>
<div class="l-offset-2__inner--left" style="{{ kss_inline_styles_offset2 }}">{{ img_placeholder }}</div>
<div class="l-offset-2__inner" style="{{ kss_inline_styles_offset1 }}">{{ paragraph2 }}</div>
</div>
<div class="l-offset-2__right-column" style="{{ kss_inline_styles_right_column }}">Right Column</div>
</div>
Margin
Add margin above or below a container. By default margin is added to the bottom.
<section class="l-margin [modifier class]" style="background-color:#CCC">
Margin content
</section>
<section class="l-margin [modifier class]" style="background-color:#CCC">
Margin content
</section>
Padded
Add padding around a container so it's not full width. Uses padding on the sides by default.
<section class="l-padded [modifier class]">
Padded content
</section>
Split 65% 35%
Split-65-35 is a two-column layout in which the left column is 65% and the right column is 35%.
<div class="split-65-35">
<div class="split-65-35__left-column" style="text-align: center; padding: 2rem 4rem; background-color: #ddd"> Left Column (~64%)
</div>
<div class="split-65-35__right-column" style="text-align: center; padding: 2rem 4rem; background-color: #ddd"> Right Column (~34%)
</div>
</div>
Three Up Layout
Creates a three-column layout using flexbox. The columns stack below breakpoint small (~880px).
<section class="l-three-up">
<div class="l-three-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-three-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-three-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
Two Up Layout
Creates a two-column layout using flexbox
{{ attach_library('h4h_theme/l-two-up') }}
{% block header%}
<section class="l-two-up {{ modifier_class }}">
{% endblock %}
<div class="l-two-up__col l-padded {{ child_modifier_class }}" style="{{ kss_inline_styles }}">
{% block right %}
Column
{% endblock %}
</div>
<div class="l-two-up__col l-padded {{ child_modifier_class }}" style="{{ kss_inline_styles }}">
{% block left %}
Column
{% endblock %}
</div>
</section>