Columns

What do they look like?

This is the first column

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

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%:

<div class="columns">
 <div class="col-33">Content in a 33% width column</div>
 <div class="col-66">Content in a 66% width column</div>
</div>

In the above example, we have col-33 and col-66.

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

In this example, we have col-25 and col-25 and col-50.

Column width options

Center your content

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

<div class="columns align-center">
<div class="col-33">
<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-66">
<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>