Meta

Meta content appears in the corner of a content box or beside a header to allow a user see related information or actions.

Plain text should be placed inside a span for correct spacing.

Heading with meta

PID: 1068883652 PID: 1068883652 A link Conservatoires
<!-- START header-with-meta component -->
<div class="heading-with-meta">
  <h2>Heading with meta</h2>
  <div class="heading-with-meta__meta">
    <span class="tag tag--small tag--label">PID: 1068883652</span>
    <span>PID: 1068883652</span>
    <a href="#">A link</a>
    <span class="tag tag--small tag--scheme--conservatoires">Conservatoires</span>
    <button class="button button--small button--minimal">Aut</button>
  </div>
</div>
<!-- END header-with-meta component -->

Heading with only plain text meta

PID: 1068883652

Heading with plain text meta and tag

PID: 1068883652 Conservatoires

Content with meta

PID: 1068883652
<!-- START content-with-meta component -->
<div class="content-with-meta">
  <div class="content">
  <img alt="UCAS Postgraduate" class="provider-logo" src="../../images/example/provider-logos/provider-logo-six.png">
  </div>
  <div class="content-with-meta__meta">
    <span class="tag tag--small tag--label">PID: 1068883652</span>
    <button class="button button--small button--minimal">Voluptas</button>
  </div>
</div>
<!-- END content-with-meta component -->

University of Loremipsum Dolorsitamet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

<div class="content-with-meta">
  <div class="content">
    <h3 class="h2">University of Loremipsum Dolorsitamet</h3>
    <p class="h2"><span class="course-details">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span></p>
  </div>
  <div class="content-with-meta__meta content-with-meta__meta--provider-logo">
    <img width="180" alt="UCAS Postgraduate" src="../../images/example/provider-logos/provider-logo-six.png">
  </div>
</div>

University of Loremipsum Dolorsitamet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

University of Loremipsum Dolorsitamet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

University of Loremipsum Dolorsitamet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur