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.

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

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