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">Impedit</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/logo-university-of-birmingham.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">Accusamus</button>
  </div>
</div>
<!-- END content-with-meta component -->