{# This file should eventually be deleted with each type of utility classes having its own variant documentation. #}
<div class="vf-content">

{% markdown %}

### Et al.

- `.vf-u-text--et-al` for use in publications lists and similar

<span class="vf-u-text--et-al">Jon Smith, Jane Johnson, </span>

### Screenreader text

- `.vf-u-sr-only` some things should only be shown to screen readers

<span class="vf-u-sr-only">Like this text</span>

### No wrap

- `.vf-u-text--nowrap` keep text together, as much as possible

I'm some words that can break awkwardly but keep the <span class="vf-u-text--nowrap">Company Name</span> together.

### Break text

- `.vf-u-text--break` break long strings of text

Here's some long text that would otherwise run off the side of the page <span class="vf-u-text--break">evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6</span>.

### Text-colours

Same colour options as background colours, with a prefix of
{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-text-color--
{% endcodeblock %}

{% markdown %}
### Text and heading sizes

- Text: From 1 to 6, with 1 being the largest.
- Button: From 1 to 2, with 1 being the largest.
- Heading: From 1 to 5, with 1 being the largest.

{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-type__text-body--1
.vf-u-type__text-body--6

.vf-u-type__text-button--1
.vf-u-type__text-button--2

.vf-u-type__text-heading--1
.vf-u-type__text-heading--5
{% endcodeblock %}

{% markdown %}
### Grid layout
{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-grid--reset {
  grid-column: 1 / -1;
}
{% endcodeblock %}

{% markdown %}
### Visibility
{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-display-none {
  display: none;
}
{% endcodeblock %}

{% markdown %}
### Margins

In a increasing numerical order, basing the actual value of `.125rem` as `100` increments.

| classname | size (in `rem`) |
|-----------|-----------------|
| .vf-u-margin--0 | 0rem |
| .vf-u-margin--100 | .25rem |
| .vf-u-margin--200 | .5rem |
| .vf-u-margin--400 | 1rem |
| .vf-u-margin--500 | 1.25rem |
| .vf-u-margin--600 | 1.5rem |
| .vf-u-margin--800 | 2rem |
| .vf-u-margin--1200 | 3rem |
<br>

{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-margin--0
.vf-u-margin--100
.vf-u-margin--200
.vf-u-margin--400
.vf-u-margin--500
.vf-u-margin--600
.vf-u-margin--800
.vf-u-margin--1200

.vf-u-margin__bottom--0
.vf-u-margin__bottom--..
.vf-u-margin__bottom--1200

.vf-u-margin__top--0
.vf-u-margin__top--..
.vf-u-margin__top--1200

.vf-u-margin__left--0
.vf-u-margin__left--..
.vf-u-margin__left--1200

.vf-u-margin__right--0
.vf-u-margin__right--..
.vf-u-margin__right--1200

{% endcodeblock %}

{% markdown %}
### Padding

In a increasing numerical order, basing the actual value of `.125rem` as `100` increments.


| classname | size (in `rem`) |
|-----------|-----------------|
| .vf-u-padding--0 | 0rem |
| .vf-u-padding--100 | .25rem |
| .vf-u-padding--200 | .5rem |
| .vf-u-padding--400 | 1rem |
| .vf-u-padding--500 | 1.25rem |
| .vf-u-padding--600 | 1.5rem |
| .vf-u-padding--800 | 2rem |
| .vf-u-padding--1200 | 3rem |
<br>


{% endmarkdown %}

{% codeblock 'css' -%}
.vf-u-padding--0
.vf-u-padding--100
.vf-u-padding--200
.vf-u-padding--400
.vf-u-padding--500
.vf-u-padding--600
.vf-u-padding--800
.vf-u-padding--1200

.vf-u-padding__bottom--0
.vf-u-padding__bottom--..
.vf-u-padding__bottom--1200

.vf-u-padding__top--0
.vf-u-padding__top--..
.vf-u-padding__top--1200

.vf-u-padding__left--0
.vf-u-padding__left--..
.vf-u-padding__left--1200

.vf-u-padding__right--0
.vf-u-padding__right--..
.vf-u-padding__right--1200

{% endcodeblock %}

<p>Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of
css documentation tool.</p>

</div>