Rua pattern library

Rua pattern library

Source: src/6-information/accordion/_index.scss, line 1

5.1 Accordion

Accordions are used to hide and show information. They help people scan web content easily so they only see what they need to.

Example

  • Showcase

    Read inspiring New Zealand stories about innovative projects that use open data. You can also hear about the challenges, successes and benefits of initiatives to publish open data.

  • Communities and groups

    Directory of data communities, discussion forums, and meetups to share ideas on data management and use.

  • Using data.govt.nz APIs

    Technical documentation and code examples for developer use with the data.govt.nz Application Programming Interfaces (APIs).

  • Benefits of using open data

    Open Data in a business context can, at first, appear at odds with the idea of economic value creation, particularly when publishing Open Data. Benefits can be found through using others open data or publishing it.

  • How is Open Data used by small businesses and start-ups?

    Examples of how start-ups and small businesses also gain particular advantages from using Open Data.

  • How is Open Data used by big business?

    Examples of how larger businesses can gain particular advantages from using Open Data.

  • How is Open Data used by social enterprises?

    Social enterprises and charities are well placed to benefit from Open Data. Unlike their for-profit contemporaries, social enterprises and charities prioritise the creation of social value over economic value.

  • Analyse data

    Resources and tools to evaluate and analyse data to generate insights and inform decision-making. 

<ul class="accordion">
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          Showcase
        </a>
        <div class="accordion__actions">
          <button class="button-icon size-sm" data-click="dirty; class: state-standard, state-active; trigger: #group-57, #group-57-icon; ariaexpanded: 'true', 'false'; arialabel: See more {$Title}, See less {$Title}" aria-controls=group-57 aria-expanded="false">
            <span class="ri ri-chevron-down" id="group-57-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
          </button>
        </div>
      </h3>
      <p class="excerpt">
        Read inspiring New Zealand stories about innovative projects that use open data. You can also hear
        about the challenges, successes and benefits of initiatives to publish open data.
      </p>
    </div>
    <div id="group-57" data-toggle="slide" style="display: none;" class="accordion__content hidden">
      <ul class="type-none">
        <li>
          <h4 class="margin-t-none">
            <a href="#">
              Charities Register
            </a>
          </h4>
          <p class="excerpt">
            In 2011 Charities Services (then the Charities Commission) made advanced search
            functionality available for the Charities Register and licensed the data for re-use under a
            Creative Commons BY licence.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Local councils
            </a>
          </h4>
          <p class="excerpt">
            The Department of Internal Affairs manages the local councils website at
            localcouncils.govt.nz, which presents data from New Zealand’s 78 local authorities in a
            consistent format that enables it to be compared and analysed.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Affordability in NZ
            </a>
          </h4>
          <p class="excerpt">
            Affordability in NZ is an open source web application, created by transportation
            consultancy MRCagney, which uses open government data to show people which suburbs will be
            most affordable for them.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Craft Beer Industry Insights
            </a>
          </h4>
          <p class="excerpt">
            The ANZ Bank uses open data to create industry insight reports that inform investment in
            the craft beer industry.
          </p>
        </li>
      </ul>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          Communities and groups
        </a>
        <div class="accordion__actions">
          <button class="button-icon size-sm" data-click="dirty; class: state-standard, state-active;  trigger: #group-48, #group-48-icon; arialabel: 'Show more communities and groups', 'Show less communities and groups'">
            <span class="ri ri-chevron-down" id="group-48-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
          </button>
        </div>
      </h3>
      <p class="excerpt">
        Directory of data communities, discussion forums, and meetups to share ideas on data management and
        use.
      </p>
    </div>
    <div id="group-48" data-toggle="slide" style="display: none;" class="accordion__content hidden">
      <ul class="type-none">
        <li>
          <h4 class="margin-t-none">
            <a href="#">
              Open data community forums
            </a>
          </h4>
          <p class="excerpt">
            Open data discussion forums, websites and meetups where you can get (and share) information
            and ideas about the innovative use of open data.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Government Analytics Network
            </a>
          </h4>
          <p class="excerpt">
            The Government Analytics Network (GAN) is a community of practice for government people
            working with data. Formed in 2017, GAN has 300 members from 40 government agencies. It is
            run by its members with support and guidance from Stats NZ and the Social Investment
            Agency.
          </p>
        </li>
      </ul>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          Using data.govt.nz APIs
        </a>
        <div class="accordion__actions">
          <button class="button-icon size-sm" data-click="dirty; class: state-standard, state-active;  trigger: #group-144, #group-144-icon; arialabel: 'Show more about Using data.govt.nz APIs', 'Show less about Using data.govt.nz APIs'">
            <span class="ri ri-chevron-down" id="group-144-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
          </button>
        </div>
      </h3>
      <p class="excerpt">
        Technical documentation and code examples for developer use with the data.govt.nz Application
        Programming Interfaces (APIs).
      </p>
    </div>
    <div id="group-144" data-toggle="slide" style="display: none;" class="accordion__content hidden">
      <ul class="type-none">
        <li>
          <h4 class="margin-t-none">
            <a href="#">
              About data.govt.nz APIs
            </a>
          </h4>
          <p class="excerpt">
            The metadata and many datasets on data.govt.nz are available for use via an Application
            Programming Interface (API). When using our API you need to know what you can and cannot do
            with the data and where to find technical documentation.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Do's and dont's of using the data.govt.nz API
            </a>
          </h4>
          <p class="excerpt">
            Data.govt.nz's data APIs are made openly available for users and it's worth taking a moment
            to find out what you can and cannot do when using our APIs in your own applications.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Accessing dataset metadata via API
            </a>
          </h4>
          <p class="excerpt">
            Data.govt.nz's datasets, organisations and groups can be accessed and queried as JSON date
            through the MetaData API.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              Accessing machine readable data via API
            </a>
          </h4>
          <p class="excerpt">
            The data.govt.nz DataStore API allows you to access and query the rows and columns of raw
            data listed by agencies in machine readable CSV format via a JSON API endpoint.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              How to export all datasets from data.govt.nz into a CSV
            </a>
          </h4>
          <p class="excerpt">
            Using the ckanapi-exporter tool you can extract all dataset metadata into a single CSV
            file.
          </p>
        </li>
        <li>
          <h4>
            <a href="#">
              How to export an agencies datasets as a data package
            </a>
          </h4>
          <p class="excerpt">
            Export an agencies datasets into sub-folders including any hosted or referenced data files
            and a json file with metadata.
          </p>
        </li>
      </ul>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          Benefits of using open data
        </a>
      </h3>
      <p class="excerpt">
        Open Data in a business context can, at first, appear at odds with the idea of economic value creation,
        particularly when publishing Open Data. Benefits can be found through using others open data or
        publishing it.
      </p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          How is Open Data used by small businesses and start-ups?
        </a>
      </h3>
      <p class="excerpt">
        Examples of how start-ups and small businesses also gain particular advantages from using Open Data.
      </p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          How is Open Data used by big business?
        </a>
      </h3>
      <p class="excerpt">
        Examples of how larger businesses can gain particular advantages from using Open Data.
      </p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          How is Open Data used by social enterprises?
        </a>
      </h3>
      <p class="excerpt">
        Social enterprises and charities are well placed to benefit from Open Data. Unlike their for-profit
        contemporaries, social enterprises and charities prioritise the creation of social value over economic
        value.
      </p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__summary">
      <h3 class="accordion__title">
        <a href="#">
          Analyse data
        </a>
        <div class="accordion__actions">
          <button class="button-icon size-sm" data-click="dirty; class: state-standard, state-active;  trigger: #group-304, #group-304-icon; arialabel: 'Show more Analyse data', 'Show less Analyse data'">
            <span class="ri ri-chevron-down" id="group-304-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
          </button>
        </div>
      </h3>
      <p class="excerpt">
        Resources and tools to evaluate and analyse data to generate insights and inform decision-making.
      </p>
    </div>
    <div id="group-304" data-toggle="slide" style="display: none;" class="accordion__content hidden">
      <ul class="type-none">
        <li>
          <h4 class="margin-t-none">
            <a href="#">
              Government algorithm transparency
            </a>
          </h4>
          <p class="excerpt">
            A cross-government review of how government uses algorithms* to improve the lives of New
            Zealanders was undertaken in 2018. The review aimed to ensure New Zealanders are informed,
            and have confidence in how the government uses algorithms.
          </p>
        </li>
      </ul>
    </div>
  </li>
</ul>

Source: src/6-information/accordion/_index.scss, line 396

5.1.1 Accessibility

The component has the following features to support accessibility:

  • Accordion controls show focus when using tab key and are accessible using a keyboard.
  • The accordion has a dynamic tab order that takes account of the opening and closing of sections.

In the context of a full page, consider the following:

  • Ensure headings are marked up correctly with the right ranking. For example if you have an <h1> page heading followed by an accordion the accordion heading should be marked up as an <h2>.
  • Accordion controls must be placed in the correct tab order in their page context.
  • If placed on a non-white background, ensure the contrast between the accordion text and its background still meets the AAA contrast and luminosity ratio standard of 4.5:1.

Source: src/6-information/accordion/_index.scss, line 413

5.1.2 Rationale

The design uses a right aligned caret icon supported by a text label, where space allows. The caret was selected over alternatives (a text label, plus/minus icons) as carets are commonly used in other controls that reveal content in situ (such as select lists) where as all other alternatives have more ambiguous meanings (e.g. a plus might mean "Add").

The heading has been styled as a link so users know to select it to get more information and the hover state reinforces the interactive and link-like behaviour of the component.

Source: src/6-information/accordion/_index.scss, line 386

5.1.3 Usability guidance

  • Avoid traditional accordions that only open 1 section at a time — people with cognitive impairments may find it hard to remember what they have read.
  • Give users full control over what content is visible.
  • Write accordion headings in plain English so users can quickly see if they need to open the accordion or not. You could write 'if' headings, such as 'If you'll use your marriage certificate overseas'.
  • It must be possible to print the accordion information.

Source: src/6-information/accordion/_index.scss, line 372

5.1.4 Usage

Do use:

  • if you want to show a list of sections and sub-sections
  • if you want to publish information that's not for most people. This is sometimes called an edge case, for example only some people need to know information about using a New Zealand marriage certificate overseas.

Don't use:

  • if it's information that's important to most users
  • if you only want to shorten a page.

Source: src/6-information/avatar/_index.scss, line 1

5.2 Avatar

@todo

Example

Author Name 
<div class="avatar">
  <div class="avatar__image">
    <img src="/rua-assets/assets/avatar-placeholder@2x.png" alt="Author Name">
  </div>
</div>

Example

What you’ll learn

  • Why open data is useful
  • Understand the benefits of using open data (inbound)
  • Understand the benefits of publishing open data for others to use (outbound)
<blockquote>
  <h2>What you’ll learn</h2>
  <ul>
    <li>Why open data is useful</li>
    <li>Understand the benefits of using open data (inbound)</li>
    <li>Understand the benefits of publishing open data for others to use (outbound)</li>
  </ul>
</blockquote>

Source: src/6-information/bubbles/_index.scss, line 1

5.4 Bubbles

@todo

Example

Bubble
Bobble 
  <div class="bg-primary bubble">
    <span class="color-white">Bubble</span>
  </div>
  <div class="bg-tango bubble">
    <span>Bobble</span>
  </div>

Example

6.4k Datasets
158 Organisations
38 Groups 
<div class="metrics-bubbles">
  <div class="metrics-bubble">
    <span class="metrics-bubble__stat">6.4k</span>
    <span class="metrics-bubble__label">Datasets</span>
  </div>
  <div class="metrics-bubble">
    <span class="metrics-bubble__stat">158</span>
    <span class="metrics-bubble__label">Organisations</span>
  </div>
  <div class="metrics-bubble">
    <span class="metrics-bubble__stat">38</span>
    <span class="metrics-bubble__label">Groups</span>
  </div>
</div>

Source: src/6-information/card/_index.scss, line 1

5.5 Card

@todo

Example

alternative text

Title of card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.

by Jane Doe
alternative text

Title of card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.

by Jane Doe
alternative text

Title of card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.

by Jane Doe 
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <a href="#">
          <img class="card__image" src="http://via.placeholder.com/315x240" alt="alternative text">
        </a>
        <h4 class="card__title">
          <a href="#">
             Title of card
          </a>
        </h4>
        <p class="excerpt">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non
          interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.
        </p>
        <time class="datetime">25 Oct 2018&nbsp;</time><span class="author">by&nbsp;<a href="#">Jane Doe</a></span>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <a href="#">
          <img class="card__image" src="http://via.placeholder.com/315x240" alt="alternative text">
        </a>
        <h4 class="card__title">
          <a href="#">
             Title of card
          </a>
        </h4>
        <p class="excerpt">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non
          interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.
        </p>
        <time class="datetime">25 Oct 2018&nbsp;</time><span class="author">by&nbsp;<a href="#">Jane Doe</a></span>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <a href="#">
          <img class="card__image" src="http://via.placeholder.com/315x240" alt="alternative text">
        </a>
        <h4 class="card__title">
          <a href="#">
             Title of card
          </a>
        </h4>
        <p class="excerpt">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat justo, luctus non
          interdum elementum, dictum ut est. In bibendum consectetur vulputate. Aenean posuere justo diam.
        </p>
        <time class="datetime">25 Oct 2018&nbsp;</time><span class="author">by&nbsp;<a href="#">Jane Doe</a></span>
      </div>
    </div>
  </div>
</div>

Source: src/6-information/checklist/_index.scss, line 1

5.6 Checklist

@todo

Example

1. Have you checked the data for any Personal Information?

You answered: Yes

2. Do you know whether you should carry out a full Privacy Impact assessment or not before publicly releasing the data?

You answered: Yes 
<div class="checklist" id="group-1" data-toggle="class: state-standard, state-active">
  <div class="checklist__header">
    <div class="checklist__status">
      <button class="button-icon sbs-summary-checkbox checklist__check-toggle checked" aria-label="Have you checked the data for any Personal Information?">
        <span id="status-1-icon" class="checklist__check-toggle-icon ri ri-check" aria-checked="true"></span>
      </button>
    </div>
    <div class="checklist__middle">
      <div class="checklist__summary">
        <h4>1. Have you checked the data for any Personal Information?</h4>
        <div class="checklist__response sbs-response">
          You answered: Yes
        </div>
      </div>
      <div class="checklist__content" id="group-1-content" style="display: none" data-toggle="slide">
        <div class="tagged-hor-rule">
          <hr>
          <span class="tagged-hor-rule__tag">Guidance expected</span>
        </div>
        <p>
          <a href="#" title="View guidance page">What is personal information and the Privacy Act?</a>
        </p>
        <div class="checklist__content-body">
          Data can contain values that identify a specific individual. This is called 'personal information' in New
          Zealand but is sometimes referred to as Personal Identifiable Information (PII). The Privacy Act 1993
          controls how 'agencies' collect, use, disclose, store and give access to personal information. The Privacy
          Act applies to almost every person, business or organisation in New Zealand.
        </div>
      </div>
    </div>
    <div class="checklist__actions">
      <button class="button-icon" data-click="class: state-standard, state-active;  trigger: #group-1, #group-1-content, #group-1-icon; ariaexpanded: 'true', 'false'; arialabel: Show guidance on question 1, Hide guidance on question 1" aria-expanded="false" aria-controls="group-1-content"">
        <span class="ri ri-chevron-down" id="group-1-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
      </button>
    </div>
  </div>
</div>
<div class="checklist" id="group-2" data-toggle="class: state-standard, state-active">
  <div class="checklist__header">
    <div class="checklist__status">
      <button class="button-icon sbs-summary-checkbox checklist__check-toggle checked" aria-label="Have you checked the data for any Personal Information?">
        <span id="status-2-icon" class="checklist__check-toggle-icon ri ri-check" aria-checked="true"></span>
      </button>
    </div>
    <div class="checklist__middle">
      <div class="checklist__summary">
        <h4>2. Do you know whether you should carry out a full Privacy Impact assessment or not before publicly releasing the data?</h4>
        <div class="checklist__response sbs-response">
          You answered: Yes
        </div>
      </div>
      <div class="checklist__content" id="group-2-content" style="display: none" data-toggle="slide">
        <div class="tagged-hor-rule">
          <hr>
          <span class="tagged-hor-rule__tag">Guidance expected</span>
        </div>
        <p>
          <a href="#" title="View guidance page">What is personal information and the Privacy Act?</a>
        </p>
        <div class="checklist__content-body">
          Data can contain values that identify a specific individual. This is called 'personal information' in New
          Zealand but is sometimes referred to as Personal Identifiable Information (PII). The Privacy Act 1993
          controls how 'agencies' collect, use, disclose, store and give access to personal information. The Privacy
          Act applies to almost every person, business or organisation in New Zealand.
        </div>
      </div>
    </div>
    <div class="checklist__actions">
      <button class="button-icon" data-click="class: state-standard, state-active;  trigger: #group-2, #group-2-content, #group-2-icon; ariaexpanded: 'true', 'false'; arialabel: Show guidance on question 2, Hide guidance on question 2" aria-expanded="false" aria-controls="group-2-content">
        <span class="ri ri-chevron-down" id="group-2-icon" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
      </button>
    </div>
  </div>
</div>

Source: src/6-information/comments/_index.scss, line 1

5.7 Comments

@todo

Example

  • Nibh Pellentesque

    Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

  • Sit Tristique

    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    Donec sed odio dui. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Venenatis Quam

    Donec sed odio dui. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<ul class="comments-list">
  <li class="comment odd">
    <p class="comment__info">
      <span class="comment__author">
        Nibh Pellentesque
      </span>
      <time class="datetime" datetime="26/11/2018 4:43pm">26/11/2018 4:43pm (4 hours ago)</time>
    </p>
    <div class="comment__text">
      <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean
        lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Duis mollis, est non
        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
        purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    </div>
  </li>
  <li class="comment even">
    <p class="comment__info">
      <span class="comment__author">
        Sit Tristique
      </span>
      <time class="datetime" datetime="26/11/2018 4:43pm">26/11/2018 4:43pm (4 hours ago)</time>
    </p>
    <div class="comment__text">
      <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit.
        Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam
        porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
        dolor auctor.<br>
        Donec sed odio dui. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum
        faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </li>
  <li class="comment odd last">
    <p class="comment__info">
      <span class="comment__author">Venenatis Quam</span>
      <time class="datetime" datetime="26/11/2018 4:48pm">26/11/2018 4:48pm (4 hours ago)</time>
    </p>
    <div class="comment__text">
      <p>Donec sed odio dui. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum
        faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </li>
</ul>

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="message mxw-md">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="message mxw-md">
  <h3>Title of message</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="message error mxw-md">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="message success mxw-md">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="message warning mxw-md">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Example

Author Name
Published by
John Smith
on 25 Oct 2018
<div class="post-details">
  <div class="avatar">
    <div class="avatar__image">
      <img src="/rua-assets/assets/avatar-placeholder@2x.png" alt="Author Name">
    </div>
  </div>
  <div class="post-details__info">
    <div class="post-details__published-by">Published by</div>
    <div class="post-details__author">John Smith</div>
    <div class="post-details__date">on 25 Oct 2018</div>
  </div>
</div>

Source: src/6-information/table/_index.scss, line 1

5.10 Table

@todo

Example

Header 1 Header 2
Key Value
Key Value
Key Value
Key Value
Key Value 
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Key</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Key</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Key</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Key</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Key</td>
      <td>Value</td>
    </tr>
  </tbody>
</table>