_layouts/components.html

---
layout: base
---

<div class="grid-wrapper">
  <div class="width-12-12">
    <h1>Template Library</h1>
    <br/><br/><br/>
  </div>
</div>

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Typography</h5></div>
  <div class="width-12-12">
    <h1>H1 Looks like this</h1>
    <h2>H2 Looks like this</h2>
    <h3>H3 Looks like this</h3>
    <h4>H4 Looks like this</h4>
    <h5>H5 Looks like this</h5>
    <h6>H6 Looks like this</h6>
    <p>P Looks like this</p>
    <a href="#">Links look like this</a>
    <br/><br/><br/>
  </div>
</div>

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Basic HTML Elements</h5></div>
  <div class="width-12-12">
    <h5>Table Example</h5>
      <table>
        <tr>
          <th>First</th>
          <th>Last</th> 
          <th>Age</th>
          <th>Address</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>7452 Hello World</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>7452 Hello World</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>7452 Hello World</td>
        </tr>

      </table>
    <br><br><br>

    <h5>Pre Tag</h5>
    <pre>Here's a very long pre element formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...</pre>
    <br><br>

    <h5>Code Tag</h5>
    Here's an example demonstrating the <code>&lt;code&gt;</code> tag.
    <br><br><br>

    <h5>Marked / Highlighted text</h5>
    Here's an example demonstrating the <mark>&lt;mark&gt;</mark> tag.
    <br><br><br>

    <h5>Block Quotes</h5>
    <blockquote>All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote.</blockquote>
    <br>

    <h5>Short Quotes</h5>
    <q>This is a short quote.</q>

    <br><br><br><br>
  </div>
</div>

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Secondary Page Title Band</h5></div>
</div>
{% include templates/secondary-page-title-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Download Announcement Band</h5></div>
</div>
{% include templates/download-announcement-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Header Navigation</h5></div>
</div>
{% include header-navigation.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Product Download Band</h5></div>
</div>
{% include templates/product-download-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Quick Pitch Band</h5></div>
</div>
{% include templates/quick-pitch-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Two Column Content Band</h5></div>
</div>
{% include templates/two-column-content-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Mid-Page CTA Band</h5></div>
</div>
{% include templates/mid-page-cta-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Documentation Archive Sub-navigation</h5></div>
</div>
{% include templates/docs-archive-subnav.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Contributions Band</h5></div>
</div>
{% include templates/contributions-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Big Three Sub-navigation Band</h5></div>
</div>
{% include templates/big-three-subnav-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Video Content Band</h5></div>
</div>
{% include templates/video-content-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Feature Highlights Band - Inline with & without images</h5></div>
</div>
{% include templates/highlights-inline-images-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Feature Highlights Band - Alternating with images</h5></div>
</div>
{% include templates/highlights-alternating-images-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Feature Highlights Band - Three Columns</h5></div>
</div>
{% include templates/highlights-three-columns-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Feature Highlights Band - Three Columns with images</h5></div>
</div>
{% include templates/highlights-three-columns-images-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Download Release Band</h5></div>
</div>
{% include templates/download-release-band.html %}

<div class="grid-wrapper">
  <div class="width-12-12 component-name"><h5>Contact Form Band</h5></div>
</div>
{% include templates/contact-form-band.html %}