Columns

Create engaging layouts using columns to spread out photography, text and buttons.

What do they look like?

This is the first column

Set to a 40% width, this column is home to a little bit of text.

A photograph

How do I use them?

First you need to open up a container to put your individual columns in, using the columns class on a section, div or similar tag, like below:

<div class="columns">

Then you add your individual columns inside this. Whatever columns you put there must add up to 100%:

<section class="columns">
 <div class="col-40">Content in a 40% width column</div>
 <div class="col-60">Content in a 60% width column</div>
</section>

In the above example, we have col-40 and col-60.

<section class="columns">
 <div class="col-20">Content in a 20% width column</div>
 <div class="col-30">Content in a 30% width column</div>
 <div class="col-50">Content in a 50% width column</div>
</section>

In this example, we have col-20 and col-30 and col-50.

Column width options

Column width Class Code
10% col-10 <div class="col-10">Content</div>
20% col-20 <div class="col-20">Content</div>
25% col-25 <div class="col-25">Content</div>
30% col-30 <div class="col-30">Content</div>
33.333% col-33 <div class="col-33">Content</div>
40% col-40 <div class="col-40">Content</div>
50% col-50 <div class="col-50">Content</div>
60% col-60 <div class="col-60">Content</div>
66.666% col-66 <div class="col-66">Content</div>
70% col-70 <div class="col-70">Content</div>
75% col-75 <div class="col-75">Content</div>
80% col-80 <div class="col-80">Content</div>
90% col-90 <div class="col-90">Content</div>

Center your content

By using the align-center class, on a desktop the content in each coluns will be centered.

A photograph
<div class="columns align-center">
<div class="col-40">
<h3>This is the second column</h3>
<p>This example is the same, except on a desktop the text is centered alongside the image to the right.</p>
</div>

<div class="col-60">
<img alt="A photograph" src="https://images.unsplash.com/photo-1669112870891-b18954631021?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60" />
</div>
</div>