Body

v3.0.0

Body is a collection of styles that apply to common content elements, these styles help users read page body content more easily.

Released

History
View changes
Install
npm i @gold.au/body
Tags
Requires
Contributors
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Alexander Sadleir avatar picture
  • Hannah J. Nicdao avatar picture
  • Raj Ghuman avatar picture

Basic Typography

Body includes a range of styles for basic content elements.

Example

<!--
  Light:      <div class="au-body">
  Light Alt:  <div class="au-body au-body--alt">
  Dark:       <div class="au-body au-body--dark">
  Dark Alt:   <div class="au-body au-body--dark au-body--alt">
-->
<div class="au-body">
  <h2>Heading level 2</h2>
  <p>
    Example paragraph. <a href="#">Internal link</a> and an <a href="#" rel="external">external link</a>.
  </p>
  <hr />
  <p>
    Lorem, Web Content Accessibility Guidelines (WCAG) ipsum dolor sit amet consectetur adipisicing elit.
  </p>
</div>

Lists

Common HTML lists receive styling from the body component.

Example

<!--
  Light:      <div class="au-body">
  Light Alt:  <div class="au-body au-body--alt">
  Dark:       <div class="au-body au-body--dark">
  Dark Alt:   <div class="au-body au-body--dark au-body--alt">
-->
<div class="au-body">
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
  <ol>
    <li>List item</li>
    <li>List item</li>
  </ol>
  <dl>
    <dt>Definition title</dt>
      <dd>Definition Definition</dd>
      <dd>Definition Definition</dd>
  </dl>
</div>

Mathematics and code

The body component also provides styling for mathematical and code related HTML elements.

Example

<!--
  Light:      <div class="au-body">
  Light Alt:  <div class="au-body au-body--alt">
  Dark:       <div class="au-body au-body--dark">
  Dark Alt:   <div class="au-body au-body--dark au-body--alt">
-->
<div class="au-body">
  <var>Variable</var>
  <sup>Superscript</sup>
  <sub>Subscript</sub>
  <code>inline code</code>
  <pre><code>code block</code></pre>
</div>

Content management

Example

<!--
  Light:      <div class="au-body">
  Light Alt:  <div class="au-body au-body--alt">
  Dark:       <div class="au-body au-body--dark">
  Dark Alt:   <div class="au-body au-body--dark au-body--alt">
-->
<div class="au-body">
  <del>Delete</del> or <s>Strike</s>
  <ins>Insert</ins>
  <mark>Marked</mark>
  <kbd>Keyboard Input</kbd>
</div>

Related components

Feedback