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
Column
Column
Column
Column
<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.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--clean
Modifier to remove bottom margins on each column.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--space-between
Use space between instead of margins for gutters. This is useful for mixed width columns.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<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.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
Image or blockquote here
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.
Right Column
<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.
.l-margin--top
By default there's no margin added to the top. Add top margin using this modifier.
<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.
.l-padded--top
By default there's no padding added to the top. Add top padding using this modifier.
.l-padded--bottom
By default there's no padding added to the bottom. Add bottom padding using this modifier.
<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%.
Left Column (~64%)
Right Column (~34%)
<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).
Column
Column
Column
<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
Column
Column
.l-two-up--30-70
Two column layout with left column is 30% wide
Column
Column
.l-two-up--70-30
Two column layout with left column is 70% wide
Column
Column
{{ 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>