A simple pattern library for all Intopia Code Github repos to make development time quicker, and with a more consistent appearance.

Page template

A ready-to-use page template

Headings

This element represent headings from the highest to lowest rank.

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

Links

This element represents an anchor element. If this element has an href attribute, then it represents a hyperlink.

<a href="#">This is a link</a>
<a href="#" class="link-primary">.link-primary</a>
<a href="#" class="link-secondary">.link-secondary</a>

Unordered list

This element represents a list of items, where the order of the list items is not important.

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

Ordered list

This element represents a list of items, where the items have been intentionally ordered.

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>

Definition/Description list

This elements represents a description list consisting of zero or more name-value groups. Each group must consist of one or more names (dt elements) each followed by one or more values (dd elements).

<dl>
  <dt>Definition term 1</dt>
  <dd>Definition description 1</dd>
  <dt>Definition term 2</dt>
  <dd>Definition description 2</dd>
  <dt>Definition term 3</dt>
  <dd>Definition description 3</dd>
  <dt>Definition term 4</dt>
  <dd>Definition description 4</dd>
</dl>

Figure and figcaption

This element represents some flow content, optionally with a figcaption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora repellat dicta quos quas mollitia quasi. Possimus placeat consectetur quaerat in quae quidem nulla, iste molestiae optio.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora repellat dicta quos quas mollitia quasi. Possimus placeat consectetur quaerat in quae quidem nulla, iste molestiae optio.

<figure>
  <img src="http://placehold.it/200x200" alt="">
  <figcaption>Figcaption</figcaption>
</figure>

Table

This element represents data with more than one dimension, in the form of a table. The table will become responsive (horizontal scroll bars will be present) only if content inside forces the table to be wider than the parent container.

<div class="table-container">
  <table>
    <caption>Table Caption</caption>
    <thead>
      <tr>
        <th>HeaderCell1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TableCell1Row1</td>
      </tr>
    </tbody>
  </table>
</div>

Input

This element represents a typed data field, usually with a form control to allow the user to edit the data.

<!-- Input -->
<div class="input">
  <label class="input__label" for="input01">Input</label>
  <input class="input__control" type="text" id="input01">
</div>

<!-- Input with help text -->
<div class="input">
  <label class="input__label" for="input02">Input with help text</label>
  <span class="message-hint" id="input-message02">Help text</span>
  <input class="input__control" type="text" id="input02" aria-describedby="input-message02">
</div>

<!-- Input with required flag -->
<div class="input">
  <label class="input__label" for="input03">Input with required flag <span class="message-required">(Required)</span></label>
  <input class="input__control" type="text" id="input03" required>
</div>

<!-- Input with error message -->
<div class="input input-error">
  <label class="input__label" for="input04">Input with error message</label>
  <input class="input__control" type="text" id="input04" required aria-describedby="input-error04">
  <span class="message-error" id="input-error04">Error message</span>
</div>

<!-- Input with help text and error message -->
<div class="input input-error">
  <label class="input__label" for="input05">Input with help text and error message</label>
  <span class="message-hint" id="input-message05">Help text</span>
  <input class="input__control" type="text" id="input05" required aria-describedby="input-message05 input-error05">
  <span class="message-error" id="input-error05">Error message</span>
</div>

<!-- Disabled input -->
<div class="input input-disabled">
  <label class="input__label" for="input06">Disabled input</label>
  <input class="input__control" type="text" id="input06" disabled>
</div>

Textarea

The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.

<!-- Textarea -->
<div class="textarea">
  <label class="textarea__label" for="textarea01">Textarea</label>
  <textarea class="textarea__control" id="textarea01"></textarea>
</div>

<!-- Textarea with help text -->
<div class="textarea">
  <label class="textarea__label" for="textarea02">Textarea with help text</label>
  <span class="message-hint" id="textarea-message02">Help text</span>
  <textarea class="textarea__control" id="textarea02" aria-describedby="textarea-message02"></textarea>
</div>

<!-- Textarea with required flag -->
<div class="textarea">
  <label class="textarea__label" for="textarea03">Textarea with required flag <span class="message-required">(Required)</span></label>
  <textarea class="textarea__control" id="textarea03" required></textarea>
</div>

<!-- Textarea with error message -->
<div class="textarea textarea-error">
  <label class="textarea__label" for="textarea04">Textarea with error message</label>
  <textarea class="textarea__control" id="textarea04" required aria-describedby="textarea-error04"></textarea>
  <span class="message-error" id="textarea-error04">Error message</span>
</div>

<!-- Textarea with help text and error message -->
<div class="textarea textarea-error">
  <label class="textarea__label" for="textarea05">Textarea with error message</label>
  <span class="message-hint" id="textarea-message05">Help text</span>
  <textarea class="textarea__control" id="textarea05" required aria-describedby="textarea-message05 textarea-error05"></textarea>
  <span class="message-error" id="textarea-error05">Error message</span>
</div>

<!-- Disabled textarea -->
<div class="textarea textarea-disabled">
  <label class="textarea__label" for="textarea06">Disabled textarea</label>
  <textarea class="textarea__control" id="textarea06" disabled></textarea>
</div>

Select

This element represents a control for selecting amongst a set of options.

<!-- Select -->
<div class="select">
  <label class="select__label" for="select01">Select</label>
  <select class="select__control" id="select01">
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<!-- Select with help text -->
<div class="select">
  <label class="select__label" for="select02">Select with help text</label>
  <span class="message-hint" id="select-message02">Help text</span>
  <select class="select__control" id="select02" aria-describedby="select-message02">
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<!-- Select with required flag -->
<div class="select">
  <label class="select__label" for="select03">Select with required flag <span class="message-required">(Required)</span></label>
  <select class="select__control" id="select03" required>
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<!-- Select with error message -->
<div class="select select-error">
  <label class="select__label" for="select04">Select with error message</label>
  <select class="select__control" id="select04" required aria-describedby="select-error04">
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <span class="message-error" id="select-error04">Error message</span>
</div>

<!-- Select with help text and error message -->
<div class="select select-error">
  <label class="select__label" for="select05">Select with help text and error message</label>
  <span class="message-hint" id="select-message05">Help text</span>
  <select class="select__control" id="select05" required aria-describedby="select-message05 select-error05">
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <span class="message-error" id="select-error05">Error message</span>
</div>

<!-- Disabled select -->
<div class="select select-disabled">
  <label class="select__label" for="select01">Disabled select</label>
  <select class="select__control" id="select01" disabled>
    <option value="">Choose an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

Radiogroup

This element represents an <input> element with a type of radio and its explicitly associated <label> element.

<!-- Radiogroup -->
<fieldset class="radiogroup">
  <legend class="radiogroup__legend">Radio group</legend>
  <ul class="radiogroup__list">
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup01-01" type="radio" name="radiogroup01">
        <label class="radiogroup__label" for="radiogroup01-01">Item 1</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup01-02" type="radio" name="radiogroup01">
        <label class="radiogroup__label" for="radiogroup01-02">Item 2</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup01-03" type="radio" name="radiogroup01">
        <label class="radiogroup__label" for="radiogroup01-03">Item 3</label>
      </div>
    </li>
  </ul>
</fieldset>

<!-- Radiogroup with errors -->
<fieldset class="radiogroup radiogroup--error">
  <legend class="radiogroup__legend">Radiogroup with errors</legend>
  <ul class="radiogroup__list">
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup02-01" type="radio" name="radiogroup02">
        <label class="radiogroup__label" for="radiogroup02-01">Item 1</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup02-02" type="radio" name="radiogroup02">
        <label class="radiogroup__label" for="radiogroup02-02">Item 2</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup02-03" type="radio" name="radiogroup02">
        <label class="radiogroup__label" for="radiogroup02-03">Item 3</label>
      </div>
    </li>
  </ul>
</fieldset>

<!-- Disabled radiogroup -->
<fieldset class="radiogroup radiogroup--disabled">
  <legend class="radiogroup__legend">Disabled radio group</legend>
  <ul class="radiogroup__list">
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup03-01" type="radio" name="radiogroup03" disabled>
        <label class="radiogroup__label" for="radiogroup03-01">Item 1</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup03-02" type="radio" name="radiogroup03" disabled>
        <label class="radiogroup__label" for="radiogroup03-02">Item 2</label>
      </div>
    </li>
    <li>
      <div class="radiogroup__item">
        <input class="radiogroup__control" id="radiogroup03-03" type="radio" name="radiogroup03" disabled>
        <label class="radiogroup__label" for="radiogroup03-03">Item 3</label>
      </div>
    </li>
  </ul>
</fieldset>

Checkbox

This element represents an <input> element with a type of checkbox and its explicitly associated <label> element.

<!-- Checkbox -->
<div class="checkbox">
  <input class="checkbox__control" id="checkbox01" type="checkbox">
  <label class="checkbox__label" for="checkbox01">Checkbox</label>
</div>

<!-- Checkbox in error state -->
<div class="checkbox checkbox--error">
  <input class="checkbox__control" id="checkbox02" type="checkbox">
  <label class="checkbox__label" for="checkbox02">Checkbox in error state</label>
</div>

<!-- Disabled checkbox -->
<div class="checkbox checkbox--disabled">
  <input class="checkbox__control" id="checkbox03" type="checkbox" disabled>
  <label class="checkbox__label" for="checkbox03">Disabled checkbox</label>
</div>

Button

The <button> element represents a clickable button.

<button class="button-secondary" type="button">Cancel</button>
<button class="button-primary" type="button">Submit</button>

Menu component

The .menu component can be used for in-page navigation.

<ul class="menu">
  <li><a href="#problem">The problem</a></li>
  <li><a href="#tests">Test criteria</a></li>
  <li><a href="#solutions">Test cases</a></li>
  <li><a href="#results">Test results</a></li>
  <li><a href="#recommendations">Recommendations</a></li>
  <li><a href="#wcag">WCAG references</a></li>
  <li><a class="menu__external" href="http://code.intopia.digital">« Home</a></li>
</ul>

Logo component

The .logo component can be used to style the logo.

<h1 class="logo"><a href="http://code.intopia.digital"><img src="assets/img/code-intopia.png" alt="Code Intopia"></a></h1>

Color utilities

These utility classes can be used to add pre-defined colors to any element.

<div class="c-primary-color">.c-primary-color</div>
<div class="c-secondary-color">.c-secondary-color</div>
<div class="c-black">.c-black</div>
<div class="c-white">.c-white</div>
<div class="c-red">.c-red</div>
<div class="c-green">.c-green</div>
<div class="c-gray55">.c-gray55</div>
<div class="c-gray60">.c-gray60</div>
<div class="c-gray65">.c-gray65</div>
<div class="c-gray70">.c-gray70</div>
<div class="c-gray75">.c-gray75</div>
<div class="c-gray80">.c-gray80</div>
<div class="c-gray85">.c-gray85</div>
<div class="c-gray90">.c-gray90</div>

Background-color utilities

These utility classes can be used to add pre-defined background-colors to any element.

<div class="bg-primary-color">.bg-primary-color</div>
<div class="bg-secondary-color">.bg-secondary-color</div>
<div class="bg-black">.bg-black</div>
<div class="bg-white">.bg-white</div>
<div class="bg-red">.bg-red</div>
<div class="bg-green">.bg-green</div>
<div class="bg-gray5">.bg-gray5</div>
<div class="bg-gray10">.bg-gray10</div>
<div class="bg-gray15">.bg-gray15</div>
<div class="bg-gray20">.bg-gray20</div>
<div class="bg-gray25">.bg-gray25</div>
<div class="bg-gray30">.bg-gray30</div>
<div class="bg-gray35">.bg-gray35</div>
<div class="bg-gray40">.bg-gray40</div>
<div class="bg-gray45">.bg-gray45</div>
<div class="bg-gray50">.bg-gray50</div>
<div class="bg-gray55">.bg-gray55</div>
<div class="bg-gray60">.bg-gray60</div>
<div class="bg-gray65">.bg-gray65</div>
<div class="bg-gray70">.bg-gray70</div>
<div class="bg-gray75">.bg-gray75</div>
<div class="bg-gray80">.bg-gray80</div>
<div class="bg-gray85">.bg-gray85</div>
<div class="bg-gray90">.bg-gray90</div>

Font utilities

These utility classes can be used to add pre-defined font sizes to any element.

<div class="font36">.font36</div>
<div class="font34">.font34</div>
<div class="font32">.font32</div>
<div class="font30">.font30</div>
<div class="font28">.font28</div>
<div class="font26">.font26</div>
<div class="font24">.font24</div>
<div class="font22">.font22</div>
<div class="font20">.font20</div>
<div class="font18">.font18</div>
<div class="font16">.font16</div>
<div class="font14">.font14</div>

Text utilities

These utility classes can be used to add pre-defined text alignment styles to any element.

<div class="text-left">.text-left</div>
<div class="text-right">.text-right</div>
<div class="text-center">.text-center</div>

Hidden utility

This utility class can be used to hide content off-screen.

<span class="hidden">.hidden</span>

Message utilities

These utility classes can be used to style different types of messages.

<span class="message-error">.message-error</span>
<span class="message-hint">.message-hint</span>
<span class="message-required">.message-required</span>

Pass/Fail utilities

These utility classes can be used to style pass and fail flags.

<span class="pass">.pass</span>
<span class="fail">.fail</span>