TheSans C4s Webfont

Headings

<h1>h1: NYP Framework default heading</h1>
<h2>h2: NYP Framework default heading</h2>
<h3>h3: NYP Framework default heading</h3>
<h4>h4: NYP Framework default heading</h4>
<h5>h5: NYP Framework default heading</h5>
<hr />
<h5 class="nyp-type-h2">h5 heading with h2 size</h5>

Text

<p>Your basic paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse molestias veritatis culpa ducimus eius ut tenetur illo pariatur quae nisi? Molestiae id sapiente, fugiat eaque reiciendis delectus magnam nulla laborum?</p>

<p class="nyp-type-body-xsmall">Extra small text with NYP Type</p>
<p class="nyp-type-body-small">Small text with NYP Type</p>
<p class="nyp-type-body-large">Large text with NYP Type</p>

<p class="u-text-extralight">Extra Light font weight with a utility</p>
<p class="u-text-light">Light font weight with a utility</p>
<p class="u-text-semilight">Semi-light font weight with a utility</p>
<p class="u-text-medium">Medium font weight with a utility (default)</p>
<p class="u-text-semibold">Semibold font weight with a utility</p>
<p class="u-text-bold">Bold font weight with a utility</p>

<p class="u-text-right">Right aligned text</p>
<p class="u-text-center">Center aligned text</p>

Images

By default images are vertically aligned to the top and have a max-width: 100%. The max-width property will be overridden if an explicit width or height is applied to the image.

<img src="/images/placeholder/doctor-16-9.jpg" alt="">
<img class="u-m-t" src="/images/placeholder/doctor-16-9.jpg" alt="" width="300px">

Inline Text

<p><sup>1</sup> This has a sup element</p>
<p><sub>1</sub> This has a sub element</p>
<p>This has <mark>marked text</mark></p>
<p>This has <del>deleted text</del></p>
<p><strong>This is bold text</strong></p>
<p><em>This is emphasized or italicized text</em></p>
<p>This line has <small>some small text</small></p>
<blockquote cite="http://">
  This is a small blockquote. I like to talk to trees and animals. That’s okay though; I have more fun than most people.
</blockquote>
<blockquote class="nyp-type-pullquote--large" cite="http://">
  This is a large blockquote. I like to talk to trees and animals. That’s okay though; I have more fun than most people.
</blockquote>

Lists

<ul>
  <li>Fluffy little clouds</li>
  <li>
    Happy little squirrels
    <ol>
      <li>Almighty fan brush</li>
      <li>You can create beautiful things</li>
    </ol>
  </li>
  <li>Happy little trees</li>
</ul>
<ol>
  <li>Fluffy little clouds</li>
  <li>
    Happy little squirrels
    <ul>
      <li>Almighty fan brush</li>
      <li>You can create beautiful things</li>
    </ul>
  </li>
  <li>Happy little trees</li>
</ol>
<ul class="o-list-bare">
  <li>Fluffy little clouds</li>
  <li>
    Happy little squirrels
    <ul>
      <li>Almighty fan brush</li>
      <li>You can create beautiful things</li>
    </ul>
  </li>
  <li>Happy little trees</li>
</ul>
<ul class="o-list-inline">
  <li class="o-list-inline__item">Fluffy little clouds</li>
  <li class="o-list-inline__item">Happy little trees</li>
  <li class="o-list-inline__item">Happy little squirrels</li>
</ul>

Tables

Tables have some very minimal styles applied to them, left-aligning headers and setting the table width equal to its parent element.

<table>
  <thead>
    <tr>
      <th scope="column">Object</th>
      <th scope="column">Paints</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trees</td>
      <td>Yellow Ochre, VanDyke Brown, Phthalo Blue</td>
    </tr>
    <tr>
      <td>Water</td>
      <td>Midnight Blue, Royal Blue, Liquid White</td>
    </tr>
  </tbody>
</table>