Skip to content

Standard Page Full Width Banner

Read More

Colour

Primary

  • Primary hsl(190, 89%, 31%)
  • Primary - Light hsl(191, 40%, 92%)
  • Primary - 95 hsl(197, 95%, 92%)

Secondary

  • Secondary hsl(220, 100%, 30%)
  • Secondary - Light hsl(216, 45%, 98%)
  • Secondary - 95 hsl(197, 95%, 92%)

Black - White

  • Headings hsl(0, 0%, 13%)
  • Text hsl(0, 0%, 40%)
  • Off-white hsla(0, 0%, 13%, 0.08)
  • White #fff

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Grid

col
col
col
col
col
col
col
col
col
col
col
col
<div class="row">
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
  <div class="col xs12 sm6 ml4 l2 xl1">...</div>
</div>

Offsets

col
col
col
col
col
col
col
col
col
col
col
<div class="row">
  <div class="col m11 offset-m1">...</div>
  <div class="col m10 offset-m2">...</div>
  <div class="col m9 offset-m3">...</div>
  <div class="col m8 offset-m4">...</div>
  <div class="col m7 offset-m5">...</div>
  <div class="col m6 offset-m6">...</div>
  <div class="col m5 offset-m7">...</div>
  <div class="col m4 offset-m8">...</div>
  <div class="col m3 offset-m9">...</div>
  <div class="col m2 offset-m10">...</div>
  <div class="col m1 offset-m11">...</div>
</div>

Column Positioning

Centre

col
<div class="row u-flex">
  <div class="col m6 centered--m">...</div>
</div>

End

col
<div class="row u-flex">
  <div class="col m6 end--m">...</div>
</div>

Start

col
<div class="row u-flex">
  <div class="col m6 start--m">...</div>
</div>

Vertical Alignment

Centre

col
col
col
<div class="row row--vertical--centre">
  <div class="col m4">...</div>
  <div class="col m4">...</div>
  <div class="col m4">...</div>
</div>

End

col
col
col
<div class="row row--vertical--end">
  <div class="col m4">...</div>
  <div class="col m4">...</div>
  <div class="col m4">...</div>
</div>

Buttons

Button Button Button Button Button
<a href="" class="c-btn">Button</a>
<a href="" class="c-btn c-btn--outline">Button</a>
<a href="" class="c-btn c-btn--secondary">Button</a>
<a href="" class="c-btn c-btn--secondary c-btn--outline">Button</a>
<a href="" class="c-btn c-btn--orange">Button</a>

Small

Button Button Button Button Button
<a href="" class="c-btn c-btn--small">Button</a>
<a href="" class="c-btn c-btn--outline c-btn--small">Button</a>
<a href="" class="c-btn c-btn--secondary c-btn--small">Button</a>
<a href="" class="c-btn c-btn--secondary c-btn--outline c-btn--small">Button</a>
<a href="" class="c-btn c-btn--orange c-btn--small">Button</a>

Icons

Button Icon Button Icon Left
<a href="" class="c-btn">Button Icon<span class="far fa-arrow-down" aria-hidden="true"></span></a>
<a href="" class="c-btn"><span class="far fa-arrow-down" aria-hidden="true"></span>Button Icon Left</a>

Full width

Button 
<a href="" class="c-btn u-btn--full">Button</a>

Asides

Basic (full-width)

<aside class="c-aside">
  ...
</aside>

Floated left of content

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<div class="u-clearfix">
  <aside class="aside--left">
    Lorem ipsum dolor...
  </aside>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Floated right of content

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<div class="u-clearfix">
  <aside class="aside--right">
    Lorem ipsum dolor...
  </aside>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Blockquotes

We welcome donations of rare books and artifacts related to the history of psychiatry and APA. Over the years, the library has been the recipient of sizable books and artifacts donations which has sustained its growth over the years. Our focus is to continue to collect unique books and artifacts that we can add to our existing collection.

<blockquote>
  <p>
    ...
  </p>
</blockquote>

Figures

Calendar

mar 2024 17
<figure class="c-figure--calendar">
  mar 2024
  <span>17</span>
</figure>

Image

Full width

Figcaption
<figure class="c-figure">
  <img src="https://picsum.photos/id/18/1268/400" alt="">
  <figcaption>Figcaption</figcaption>
</figure>

Floated left of content

Figcaption

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="u-clearfix">
  <figure class="c-figure c-figure--left">
    <img src="https://picsum.photos/id/18/800/260" alt="">
    <figcaption>Figcaption</figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Floated right of content

Figcaption

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="u-clearfix">
  <figure class="c-figure c-figure--right">
    <img src="https://picsum.photos/id/18/800/260" alt="">
    <figcaption>Figcaption</figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Small

Figcaption
<figure class="c-figure c-figure--sm">
  <img src="https://picsum.photos/id/18/160/160" alt="">
  <figcaption>Figcaption</figcaption>
</figure>

Video

Full width

<figure class="c-figure c-figure--video">
  <iframe src="https://www.youtube.com/embed/E-kMcU6pP5I?si=A9o_GXhI_hg84hi1&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</figure>

Floated left of content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="u-clearfix">
  <figure class="c-figure c-figure--video c-figure--left">
    <iframe src="https://www.youtube.com/embed/E-kMcU6pP5I?si=A9o_GXhI_hg84hi1&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </figure>
  <p>...</p>
</div>

Floated right of content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="u-clearfix">
  <figure class="c-figure c-figure--video c-figure--right">
    <iframe src="https://www.youtube.com/embed/E-kMcU6pP5I?si=A9o_GXhI_hg84hi1&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </figure>
  <p>...</p>
</div>

Toggles

This is the content for toggle 1.

<button class="c-btn c-toggle__btn" aria-expanded="false" aria-controls="toggleContent1">Toggle Content 1</button>
<div id="toggleContent1" class="c-toggle__content u-hide">
  <p>This is the content for toggle 1.</p>
</div>

Tables

Standard

Header 1 Header 2 Header 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3 
<div class="c-table--responsive">
  <table class="c-table">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row 1, cell 1</th>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 2, cell 1</th>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 3, cell 1</th>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 4, cell 1</th>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

Alternative Rows

Header 1 Header 2 Header 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3 
<div class="c-table--responsive">
  <table class="c-table c-table--alt-rows">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row 1, cell 1</th>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 2, cell 1</th>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 3, cell 1</th>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 4, cell 1</th>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

Outline

Header 1 Header 2 Header 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3 
<div class="c-table--responsive">
  <table class="c-table c-table--outline">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row 1, cell 1</th>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 2, cell 1</th>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 3, cell 1</th>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 4, cell 1</th>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

Outline and Alternative Rows

Header 1 Header 2 Header 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3 
<div class="c-table--responsive">
  <table class="c-table c-table--outline c-table--alt-rows">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row 1, cell 1</th>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 2, cell 1</th>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 3, cell 1</th>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
      </tr>
      <tr>
        <th scope="row">Row 4, cell 1</th>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

Utilities

Border top

Applies top border to an element.

<p class="u-b--t u-pt--1">...</p>

Border bottom

Applies bottom border to an element.

<p class="u-b--b u-pb--1">...</p>