# Columns

{% columns %}
{% column %}
Left hand side!
{% endcolumn %}

{% column %}
Middle column
{% endcolumn %}

{% column %}
Right hand side!
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="25%" %}
Test different widths

<figure><img src="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2FrJLOjCFYEQeS8MO2g7qk%2Fphoto-1611773780085-ebd3b4662f51.jpeg?alt=media&#x26;token=630fa795-c799-44b3-a4b4-5ca1b922a108" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column width="75%" %}

## Ut ligula ipsum, viverra vel hendrerit vitae

Donec eu augue in dui test ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem.
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="75%" %}
Test different widths

<figure><img src="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2FrJLOjCFYEQeS8MO2g7qk%2Fphoto-1611773780085-ebd3b4662f51.jpeg?alt=media&#x26;token=630fa795-c799-44b3-a4b4-5ca1b922a108" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column width="25%" %}

## Ut ligula ipsum, viverra vel hendrerit vitae

Donec eu augue in dui test ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem.
{% endcolumn %}
{% endcolumns %}

{% columns fullWidth="true" %}
{% column width="33.33333333333333%" %}

## Ut ligula ipsum, viverra vel hendrerit vitae

Donec eu augue in dui test ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem. \
\ <a href="#test" class="button primary">Learn more</a>
{% endcolumn %}

{% column width="66.66666666666667%" %}

<h2 align="right">Vertical alignment - top</h2>

<p align="right">Donec eu augue in dui convallis ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem.</p>
{% endcolumn %}
{% endcolumns %}

{% columns fullWidth="true" %}
{% column width="33.33333333333333%" %}

## Ut ligula ipsum, viverra vel hendrerit vitae

Donec eu augue in dui test ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem. \
\ <a href="#test" class="button primary">Learn more</a>
{% endcolumn %}

{% column width="66.66666666666667%" valign="middle" %}

<h2 align="right">Vertical alignment - centered</h2>

<p align="right">Donec eu augue in dui convallis ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem.</p>
{% endcolumn %}
{% endcolumns %}

{% columns fullWidth="true" %}
{% column width="33.33333333333333%" %}

## Ut ligula ipsum, viverra vel hendrerit vitae

Donec eu augue in dui test ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem. \
\ <a href="#test" class="button primary">Learn more</a>
{% endcolumn %}

{% column width="66.66666666666667%" valign="bottom" %}

<h2 align="right">Vertical alignment - bottom</h2>

<p align="right">Donec eu augue in dui convallis ultrices id ac sapien. Phasellus mauris lorem, ullamcorper ac elementum sit amet, facilisis sit amet sem.</p>
{% endcolumn %}
{% endcolumns %}