Skip to main content
Design System 2
University Relations
Contribute

Program Listing

Shared Partial Name:

wvu-program-listing

When to Use

Use this when you want to list your college or department’s programs and majors. This component provides links to WVU’s program pages.

Example: Standard Program Listing

Filter by Program Type:
Filter by Delivery Option:

Regents Bachelor of Arts

Regents Bachelor of Arts
Online

Have you gone as far as you can in your career without a bachelor’s degree? The RBA program is an innovative bachelor’s degree that is both flexible and cost effective for adult learners already juggling family, work and other obligations.

Areas of Emphasis

  • Advertising
  • American History
  • Business Administration
  • Child Development
  • Chinese Studies
  • Communication Studies
  • Creative Writing
  • Economics
  • Energy Land Management
  • Foreign Literature in Translation
  • French
  • Geology
  • German
  • History
  • International Studies: Africa and Middle East
  • International Studies: The Americas
  • International Studies: Asia
  • International Studies: Development Studies
  • International Studies: Europe
  • Italian Studies
View Program Page
Copy 

<main id="wvu-main-content" class="  py-5 bg-light">  
  <div class="container">
    <div class="row">
      <div class="col-md-3 mb-4">        
        <div id="options" class="clearfix combo-filters">
          <div class="clearfix">              
            <div class="option-combo program-type mb-4">
              <fieldset>
                <legend class="h6 small text-uppercase mb-1 helvetica-neue-bold">Filter by Program Type:</legend>
                <div class="filter option-set js-radio-button-group" data-filter-group="program-type">
                  <div class="form-check">
                    <input class="form-check-input active selected" type="radio" name="program-type" id="radioAny" data-filter-value="" checked="">
                    <label class="form-check-label" for="radioAny">Any</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="program-type" id="radioBachelors" data-filter-value=".bachelors">
                    <label class="form-check-label" for="radioBachelors">Bachelor’s</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="program-type" id="radioMasters" data-filter-value=".masters">
                    <label class="form-check-label" for="radioMasters">Master’s</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="program-type" id="radioDoctoral" data-filter-value=".doctoral">
                    <label class="form-check-label" for="radioDoctoral">Doctoral</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="program-type" id="radioCertificate" data-filter-value=".certificate">
                    <label class="form-check-label" for="radioCertificate">Certificate</label>
                  </div>
                </div>
              </fieldset>              
            </div>              
            <div class="option-combo delivery-option mb-4">
              <legend class="h6 small text-uppercase mb-1 helvetica-neue-bold">Filter by Delivery Option:</legend>
              <div class="filter option-set js-radio-button-group" data-filter-group="delivery-option">
                <div class="form-check">
                  <input class="form-check-input active selected" type="radio" name="delivery-option" id="radioAny2" data-filter-value="" checked="">
                  <label class="form-check-label" for="radioAny2">Any</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="delivery-option" id="radioInPerson" data-filter-value=".in-person">
                  <label class="form-check-label" for="radioInPerson">In Person</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="delivery-option" id="radioOnline" data-filter-value=".online">
                  <label class="form-check-label" for="radioOnline">Online</label>
                </div>
              </div>
            </div>          
          </div>        
        </div> <!-- #options -->
      </div>
      <div class="col-md-9">        
        <div id="container" class="grid clearfix">            
          <div class="w-100 mb-3 element-item bachelors  Major non-minor college-of-education-and-human-services major online" id="regents-bachelor-of-arts-rba" data-include-minor="hide-minor" data-program-type="bachelors" data-school="college-of-education-and-human-services" data-delivery-option="online">              
            <div class="pt-1 bg-wvu-gold">
              <div class="bg-white">
                <div class="row align-items-stretch">
                  <div class="col-lg">
                    <div class="px-3 pt-3 pb-2 px-xl-4 pt-xl-4 pb-xl-3 bg-white h-100">                        
                      <h2 class="mb-0 h1 text-wvu-blue" id="">                            
                        <a href="https://online.wvu.edu/programs/regents-bachelor-of-arts-r-b-a/" class="text-decoration-none text-wvu-blue">Regents Bachelor of Arts
                          <span class="visually-hidden"> (Online)</span>
                          <span class="visually-hidden"> Regents Bachelor of Arts</span>
                        </a>                        
                      </h2>                          
                      <div class="helvetica-neue-light text-uppercase mb-1">Regents Bachelor of Arts</div>                            
                      <div class="badge bg-primary">
                        <span class="fa-solid fa-laptop" aria-hidden="true"></span> Online
                      </div>                        <!-- descriptionTeaser has a <p> tag / html -->
                      <div class="mt-3">
                        <p>Have you gone as far as you can in your career without a bachelor’s degree? The RBA program is an innovative bachelor’s degree that is both flexible and cost effective for adult learners already juggling family, work and other obligations.</p>                            
                        <h3 class="border-bottom border-light h5 mt-3">Areas of Emphasis</h3>
                        <ul class="list-unstyled">                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Advertising
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> American History
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Business Administration
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Child Development
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Chinese Studies
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Communication Studies
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Creative Writing
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Economics
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Energy Land Management
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Foreign Literature in Translation
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> French
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Geology
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> German
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> History
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> International Studies: Africa and Middle East
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> International Studies: The Americas
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> International Studies: Asia
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> International Studies: Development Studies
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> International Studies: Europe
                          </li>                                
                          <li>
                            <span class="fa-solid fa-angle-right text-wvu-gold" aria-hidden="true"></span> Italian Studies
                          </li>                            
                        </ul>                        
                      </div>                      
                    </div>
                  </div>                      
                  <div class="col-lg-4">
                    <div class="bg-white p-3 py-lg-4 pl-lg-0 pr-lg-4 h-100">                            
                      <div class="btn-group-vertical w-100 shadow-sm">
                        <a class="btn btn-light text-start w-100 d-flex align-items-center" href="https://online.wvu.edu/programs/regents-bachelor-of-arts-r-b-a/">
                          <span class="fa-solid fa-external-link-alt text-center" aria-hidden="true" style="width: 2rem;"></span> View Program Page
                          <span class="visually-hidden">: Regents Bachelor of Arts</span>
                        </a>
                      </div>                        
                    </div>
                  </div>                  
                </div>                  <!-- this should throw an accessibility error becausethe visually hidden text is in the middle of the buttonnot either end -->
              </div>
            </div>
          </div>        
        </div> <!-- #container -->
      </div>
    </div>
  </div>
</main>

Content Model and Styling Guidelines

The following guidelines will help ensure your content and styling follow our design principles, and ensures consistency and unity across your pages as well as other WVU-branded websites.

Content-Specific Guidelines

Content Max Characters Description
Program Name* N/A The name of the program.
Program Type* N/A The type of program e.g. “Bachelor’s,” “Master’s,” etc.
Online Badge N/A A badge showing that the program is offered online.
Program Blurb* 1-2 brief paragraphs A brief description of the program.
Areas of Emphasis N/A A list of areas of emphasis related to the program.
Program Links* N/A These are sections on the program page (hosted on WVU.edu) you can link to.

* Indicates required content.

Shared CleanSlate Partial

Type: Dynamic (pulls data from other pages in site)

This component corresponds to the latest version of the shared program-listing partial in the Design System CleanSlate. CleanSlate developers can use this component by adding a shared partial to a template. Below are the available configuration options for this component.

Configuration

Name Options Description
contentful_api_string A URL string A URL for Contentful XML data. Get this string from UR - Digital.
disable_delivery_method checked
unchecked 		If checked, the delivery method filter will no longer display.
disable_program_type checked
unchecked 		If checked, the program filter will no longer display.