Skip to main content
  • Home
  • Tutorials
  • Create a Template Using a WVU Design System Component

Create a Template Using a WVU Design System Component

The easiest way to create CleanSlate templates with WVU Design System components is to simply copy the HTML of the component you want to use, then add your own Ruby code.

Before you do this, you should be familiar our Theme Development Guidelines.

Below is an example of how you might create a template for your CleanSlate theme using the Hero Component. The first code block is the HTML for the Hero. The second block is how you would incorporate it into a template.

Pure HTML:

<section aria-labelledby="hero-1-label" class="jumbotron jumbotron-fluid mb-0 wvu-overflow-hidden wvu-bg-size-cover bg-dark text-white wvu-bg-position-center wvu-bg-size-cover wvu-bg-vignetting" style="background-image: url(/files/8aa49c0c-ca6f-495b-af9d-72fd45761700/1780x1780?cb=1552307215)">
  <div class="container position-relative wvu-z-index-content">
    <div class="row py-5">
      <div class="col col-md-6 ">
        <h1 id="hero-1-label" class="display-1 wvu-shout wvu-slash">
          It Starts Now.
        </h1>
        <p class="lead py-2">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Call to Action</a>
      </div>
    </div>
  </div>
</section>

HTML in a template i.e.
views/frontpage.html
:

---
layout: default
---

<section aria-labelledby="hero-1-label" class="jumbotron jumbotron-fluid mb-0 wvu-overflow-hidden wvu-bg-size-cover bg-dark text-white wvu-bg-position-center wvu-bg-size-cover wvu-bg-vignetting" style="background-image: url(/files/8aa49c0c-ca6f-495b-af9d-72fd45761700/1780x1780?cb=1552307215)">
  <div class="container position-relative wvu-z-index-content">
    <div class="row py-5">
      <div class="col col-md-6 ">
        <h1 id="hero-1-label" class="display-1 wvu-shout wvu-slash">
          <r:editable_region name="wvu-hero-1__header">
            It Starts Now.
          </r:editable_region>
        </h1>
        <r:editable_region name="wvu-hero-1__main>
          <p class="lead py-2">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <a class="btn btn-primary btn-lg" href="#" role="button">Call to Action</a>
        <r:editable_region>
      </div>
    </div>
  </div>
</section>