ferris-ds 🎡

Design system for WBEZ.org

Version: 6.0.2

GitHub data updated: Jan 29, 2020

Elements

Elements > Headings

Headings

Default style for headings, i.e. <h1><h6>

H1: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

H2: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

H3: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

H4: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

H5: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

H6: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<h1>H1: Story headline text <a>with link.</a></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>

<h2>H2: Story headline text <a>with link.</a></h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>

<h3>H3: Story headline text <a>with link.</a></h3>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>

<h4>H4: Story headline text <a>with link.</a></h4>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>

<h5>H5: Story headline text <a>with link.</a></h5>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>

<h6>H6: Story headline text <a>with link.</a></h6>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at
  ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed
  finibus. Ut pulvinar eros pulvinar turpis varius porttitor.
</p>
Elements > Links

Links

Default styles for <a> element.

This is regular text. This is a regular link.

HTML Example
<p>This is regular text. <a href="#">This is a regular link.</a></p>