Typography #

All typography is fluid responsive, set using Utopia’s Fluid Type Calculator, which makes use of the CSS Clamp function. Choose your min and max font size, then select a type scale and Utopia will generate the code.

Headings #

All six heading level elements are available to use.

h1 Heading 1

h2 Heading 2 #

h3 Heading 3 #

h4 Heading 4 #

h5 Heading 5 #

h6 Heading 6 #

<h1>h1 Heading 1</h1>
<h2>h2 Heading 2</h2>
<h3>h3 Heading 3</h3>
<h4>h4 Heading 4</h4>
<h5>h5 Heading 5</h5>
<h6>h6 Heading 6</h6>

Semantic heading classes #

All 6 headings sizes can also be applied as classes. This is important for when you wish to keep the semantic order of headings, but wish to style them in different sizes. For example, if the correct order of a heading means it should be an h2, but you would like it styled as an h1, you can add class="h1" to your h2 element, and so on.

<h2 class="h1">This is a h2 heading styled as an h1 heading</h2>

Text basics #

There are various HTML elements you can use to format inline text in a bunch of different ways:

• <strong> to create Bold text.
• <em> to create emphasised text.
• <u> to underline text.
• <small> to make small text.
• <code> to create inline code examples.
• <mark> element to highlight text.
• <kbd> for keyboard commands; Ctrl + V.
• <del> to create text with a strikethrough

Lists #

Create unordered lists using the ul element:

• Unordered list item
• Unordered list item

<ul>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ul>

Create ordered lists using the ol element:

1. Ordered list item
2. Ordered list item

<ol>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ol>

Blockquotes #

Use the <blockquote> element to quote books you’ve read, things you’ve heard from your pals or even ideas you’ve had yourself.

All large-scale human cooperation is ultimately based on our belief in imagined orders.

– Yuval Noah Harari

<blockquote>
  <p>All large-scale human cooperation is ultimately based on our belief in imagined orders.</p>
  <p>- <cite>Yuval Noah Harari</cite></p>
</blockquote>

Code blocks #

Create code blocks, like the one below, using the <pre> element with a nested <code> element inside.

<pre>
  <code>
    body {
      color: var(--color-dark);
      background: var(--color-light);
      font-size: var(--step-0);
      font-family: var(--font-base);
      letter-spacing: var(--tracking);
    }
  </code>
</pre>

Forms #

Use the <form> element to contain any interative elements, used to submit information and collect data.

<form>
  <label for="email-address">Email Address</label>
  <input name="email-address" id="email-address" type="email" autocomplete="username" required>
  <label for="password">Password</label>
  <input type="password" name="password" id="password" autocomplete="current-password">
  <button type="submit" value="Submit">Submit</button>
</form>

Optionally, you can also:

• Use <fieldset> to group elements within the form.
• Use <legend> to caption the form contents.
• Add the w-full width utility class to any input, textarea or button to make it fill the width of the form.

<form>
  <fieldset>  
    <legend>Give us your feedback</legend>
    <label for="full-name">Full Name</label>
    <input class="w-full" name="full-name" id="full-name" type="text" placeholder="e.g Harry" required>
    <label for="email-address">Email Address</label>
    <input class="w-full" name="email-address" id="email-address" type="email" autocomplete="username" required>
    <label for="message">Message</label>
    <textarea class="w-full" rows="4" name="message" id="message" type="text" required></textarea>
    <button class="w-full" type="submit" value="Submit">Submit</button>
  </fieldset>
</form>

Selects are also a thing:

<form>
  <fieldset>
    <legend>Your favourite character</legend>
      <label for="character-select">Choose a character:</label>
      <select name="characters" id="character-select">
        <option value="">Choose an option</option>
        <option value="luke">Luke</option>
        <option value="han">Han</option>
        <option value="leia">Leia</option>
        <option value="obi-wan">Obi-Wan</option>
        <option value="yoda">Yoda</option>
      </select>
      <button type="submit" value="Submit">Submit</button>
  </fieldset>
</form>

As are radio buttons:

<form>
  <fieldset>
    <legend>Choose a size:</legend>
    <label>
      <input type="radio" name="size" value="small">
      Small
    </label>
    <label>
      <input type="radio" name="size" value="medium">
      Medium
    </label>
    <label>
      <input type="radio" name="size" value="large">
      Large
    </label>
  </fieldset>
</form>

And, checkboxes:

<form>
  <label for="email-address">Email Address</label>
  <input name="email-address" id="email-address" type="email" autocomplete="username" required>
  <label for="password">Password</label>
  <input type="password" name="password" id="password" autocomplete="current-password">
  <label>
    <input type="checkbox" name="checkbox" id="checkbox">
    I agree to the <a href="#">terms and conditions</a>.
  </label> 
  <button type="submit" value="Submit">Sign up</button>
</form>

Accordions #

Use the <details> and <summary> elements to create accordions.

<details>
  <summary>Do you ship internationally?</summary>
  <p>Unfortunately, we only ship domestically at this time, however we hope to ship internationally in the not too distant future.</p>
</details>

Add data-variant="fancy" to hide default ::marker and enhance accordions with fancy “more” and “less” arrows, positioned on the far right of the <summary> text.

<details data-variant="fancy">
  <summary>Do you ship internationally?</summary>
  <p>Unfortunately, we only ship domestically at this time, however we hope to ship internationally in the not too distant future.</p>
</details>

Tables #

Tables are handy for visualising and making connections between different types of structured data. Use all the usual elements: <table>, <thead>, <tr>, <th>, <tbody>, <td> and <caption>.

<table>
  <caption>
    <small>Star Wars characters and their home worlds</small>
  </caption>
  <thead>
    <tr>
      <th>Character</th>
      <th>Homeworld</th>
      <th>Weapon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luke</td>
      <td>Tatooine</td>
      <td>Lightsaber</td>
    </tr>
    <tr>
      <td>Han</td>
      <td>Corellia</td>
      <td>Blaster</td>
    </tr>
    <tr>
      <td>Leia</td>
      <td>Alderaan</td>
      <td>Blaster</td>
    </tr>
    <tr>
      <td>Obi-Wan</td>
      <td>Stewjon</td>
      <td>Lightsaber</td>
    </tr>
    <tr>
      <td>Yoda</td>
      <td>Dagobah</td>
      <td>Lightsaber</td>
    </tr>
  </tbody>
</table>

Buttons #

Use the <button> element to create interactive buttons. To style a button with the outline style, use the data attribute data-variant="outline". For more on this approach see Exception’s in Cube CSS.

<button type="submit" value="Submit">Submit</button>
<button type="submit" data-variant="outline" value="Clear">Clear</button>
<button type="submit" disabled="">Disabled</button>

Inputs with type="submit", type="reset" or type="button" applied also inherit button styles. Therefore, you can apply the variant style to these elements too.

<input type="submit" />
<input type="submit" data-variant="outline" />

Just like with form elements, you can also use the w-full width utility class to make a <button> fill the full width of its parent container.

<button class="w-full" type="submit" value="Submit">Sign up</button>

Links #

Use the anchor element, a.k.a <a> tag to link to different pages

<a href="/about">About</a>

Links look like this, by default. But you can also use use the data attribute data-variant="naked" to make them look like the same as default text.

<a href="/" data-variant="naked">A naked link</a>

An example of data-variant="naked" being used on links can be seen in the navigation found at the top of each page on this website.

Images #

Use the <img> element in the usual way. Images have max-width: 100% applied, ensuring they fill the entire width of parent element, as we’ve come to expect.

<img src="/img/brian-mcgowan-HiftPDiIVTY-unsplash.jpg" alt="" />

To give your image a caption, place your <img> inside a <figure> and use <figcaption> for the caption.

<figure>
  <img src="/img/brian-mcgowan-HiftPDiIVTY-unsplash.jpg" alt="" />
  <figcaption>
    Photo by <a href="https://unsplash.com/@sushioutlaw">Brian McGowan</a> on Unsplash.
  </figcaption>
</figure>

Horizontal rule #

The <hr> element can be used to create a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

<hr>

Visibility #

You can use the [hidden] attribute to prevent the browser from rendering content. This is useful when you are manipulating content with JavaScript.

<p hidden>This paragraph is hidden from the browser and will not render</p>

If you don’t want content to be visible in the browser, but it should remain accessible to assistive technologies, such as screen readers, then use the visually hidden utility class instead.