Skip to main content
Design System 2
University Relations
Contribute

Article

Shared Partial Name:

wvu-article

When to Use

Use this to post blog articles, news items, or magazine articles on your site.

Example 1: Standard Article

At Vero Eos et Accusamus et Iusto Odio Dignissimos

Adam Glenn |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Student studying nature

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Joe Schmoe

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Copy 

<main id="wvu-main-content" class="  ">  
  <article class="" itemscope="" itemprop="blogPost" itemtype="http://schema.org/BlogPosting">    
    <div class="container">
      <div class="row py-5">
        <div class="col-sm-8 col-md-6 mx-auto">          
          <h1 class="display-4" id="article-1-label" itemprop="headline">At Vero Eos et Accusamus et Iusto Odio Dignissimos</h1>          
          <p class="small d-block mb-4">            Adam Glenn |            
            <time datetime="2022-05-23T02:48:48-04:00">Monday, May 23, 2022</time>
          </p>          
          <div itemprop="articleBody">            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officia deserunt mollit animid est laborum.</p>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiumdoloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoreveritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemoenim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequinesciunt.</p>
            <figure class="mt-4 mx-lg-n5">
              <img alt="Student studying nature" data-asset-id="214441" data-asset-version="960x640" src="/files/78c1993d-3c7d-417d-bf20-8aaa9e3b178e/960x640?cb=2fca806bf9fff6ba3a114d9c3e5d36c5">
              <br>
            </figure>
            <figcaption class="mb-4">
              <p class="small d-block iowan-old-style">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentiumvoluptatum deleniti atque corrupti quos dolores et quas molestiasexcepturi sint occaecati cupiditate non provident, similique suntin culpa qui officia deserunt mollitia animi, id est laborum et dolorumfuga.</p>
            </figcaption>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentiumvoluptatum deleniti atque corrupti quos dolores et quas molestias excepturisint occaecati cupiditate non provident, similique sunt in culpa quiofficia deserunt mollitia animi, id est laborum et dolorum fuga. Etharum quidem rerum facilis est et expedita distinctio.</p>
            <blockquote class="iowan-old-style-black-italic h2 wvu-bar wvu-bar--center my-4 pb-1 text-center mx-lg-n5">Et harum quidem rerum facilis est et expedita distinctio. Nam liberotempore, cum soluta nobis est eligendi optio cumque nihil impedit quominus id quod maxime placeat facere possimus, omnis voluptas assumendaest, omnis dolor repellendus.
              <span class="d-block iowan-old-style text-uppercase wvu-letter-spacing h5 mt-2">Joe Schmoe</span>
            </blockquote>
            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibussaepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendisvoluptatibus maiores alias consequatur aut perferendis doloribus asperioresrepellat.</p>
          </div>
        </div>
      </div>
    </div>
  </article>
  <aside class="py-5 border-top">
    <div class="container wvu-z-index-content">
      <div class="row">
        <div class="col-md-8 mx-auto">
          <div class="row">
            <div class="col-md-6">
              <h2 class="h3">Related Articles</h2>              
              <ul clas="pl-2">                
                <li>
                  <a href="https://designsystem.wvu.edu/articles/2022/09/05/perspiciatis-unde-omnis-iste-natus-error" data-page-id="144861">Viral market share ROI ideation holistic</a>
                </li>              
              </ul>            
            </div>            
            <div class="col-md-6">
              <h2 class="wvu-blog__sidebar-header h3">Archives</h2>
              <ul class="pl-2 wvu-blog-archive">
                <li>
                  <a href="/articles/2022/5">May 2022</a>
                  <span class="badge badge-wvu-neutral--dark-gray text-white">(2)</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</main>

Example 2: Magazine Article

At Vero Eos et Accusamus et Iusto Odio Dignissimos

Subhead goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Students walking on University Avenue

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Joe Schmoe

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Copy 

<section id="article-hero-1" aria-label="article-hero-1" class=" py-5 bg-dark text-white wvu-bg-position-top wvu-overflow-hidden wvu-bg-size-cover wvu-bg-vignetting" style="background-image: url(https://dsws.sandbox.wvu.edu/files/62ac1bb6-32be-43f8-91ca-944b35529594/1780x1780?cb=63996a30122d53efe91e1c09e7e1a3d4)">  
  <div class="container position-relative wvu-z-index-content">
    <div class="row py-5">
      <div class="col col-md-6 ">        
        <h1 id="article-hero-1-label" itemprop="headline" class="display-2 iowan-old-style">At Vero Eos et Accusamus et Iusto Odio Dignissimos</h1>        
        <p class="helvetica-neue-bold h2">Subhead goes here.</p>        
        <p>          
          <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            <span itemprop="name">Adam Glenn |</span>
          </span>          
          <time datetime="2022-05-18T18:51:00-04:00">Wednesday, May 18, 2022</time>
        </p>
      </div>
    </div>
  </div>
</section>
<main id="wvu-main-content" class="  ">  
  <article class="" itemscope="" itemprop="blogPost" itemtype="http://schema.org/BlogPosting">    
    <div class="container">
      <div class="row py-5">
        <div class="col-sm-8 col-md-6 mx-auto">          
          <div itemprop="articleBody">            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officia deserunt mollit animid est laborum.</p>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiumdoloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoreveritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemoenim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequinesciunt.</p>
            <figure class="mt-4 mx-lg-n5">
              <img alt="Students walking on University Avenue" data-asset-id="214863" data-asset-version="960x640" src="/files/97f66df2-8acd-40a9-8785-bc628229758e/960x640?cb=4e7d4db13fdf569c894bec567f2d27dc">
              <br>
            </figure>
            <figcaption class="mb-4">
              <p class="small d-block iowan-old-style">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentiumvoluptatum deleniti atque corrupti quos dolores et quas molestiasexcepturi sint occaecati cupiditate non provident, similique suntin culpa qui officia deserunt mollitia animi, id est laborum et dolorumfuga.</p>
            </figcaption>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentiumvoluptatum deleniti atque corrupti quos dolores et quas molestias excepturisint occaecati cupiditate non provident, similique sunt in culpa quiofficia deserunt mollitia animi, id est laborum et dolorum fuga. Etharum quidem rerum facilis est et expedita distinctio.</p>
            <blockquote class="iowan-old-style-black-italic h2 wvu-bar wvu-bar--center my-4 pb-1 text-center mx-lg-n5">Et harum quidem rerum facilis est et expedita distinctio. Nam liberotempore, cum soluta nobis est eligendi optio cumque nihil impedit quominus id quod maxime placeat facere possimus, omnis voluptas assumendaest, omnis dolor repellendus.
              <span class="d-block iowan-old-style text-uppercase wvu-letter-spacing h5 mt-2">Joe Schmoe</span>
            </blockquote>
            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibussaepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendisvoluptatibus maiores alias consequatur aut perferendis doloribus asperioresrepellat.</p>
          </div>
        </div>
      </div>
    </div>
  </article>
  <aside class="py-5 border-top">
    <div class="container wvu-z-index-content">
      <div class="row">
        <div class="col-md-8 mx-auto">
          <div class="row">
            <div class="col-md-6">
              <h2 class="h3">Related Articles</h2>              
              <ul clas="pl-2">                
                <li>
                  <a href="https://designsystem.wvu.edu/articles/2022/05/23/at-vero-eos-et-accusamus-et-iusto-odio-dignissimos" data-page-id="140585">B2B snackable content holistic target audience</a>
                </li>              
              </ul>            
            </div>            
            <div class="col-md-6">
              <h2 class="wvu-blog__sidebar-header h3">Archives</h2>
              <ul class="pl-2 wvu-blog-archive">
                <li>
                  <a href="/articles/2022/5">May 2022</a>
                  <span class="badge badge-wvu-neutral--dark-gray text-white">(2)</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</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
Headline* 56 The title of your article.
Subhead 56 The subheading of your article.
Author N/A The author of your article.
Body* N/A The body of your article.

* Indicates required content.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared article 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
Hide author checked
unchecked 		If checked, the article’s author won’t display.
If blog article, show hero checked
unchecked 		If checked, a hero component will replace the standard article header.