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.
<!-- 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">Ipsum</button>
</div>
</div>
<!-- END header-with-meta component -->
<!-- START header-with-meta-count component -->
<div class="heading-with-meta heading-with-meta--count">
<h2>Heading with meta and count <span class="count">1234</span></h2>
<div class="heading-with-meta__meta">
<span class="tag tag--small tag--label">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">Et</button>
</div>
</div>
<!-- END header-with-meta-count component --><!-- START header-with-meta-margin component -->
<div class="heading-with-meta heading-with-meta--margin">
<h2>Heading with meta and margins</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">Facilis</button>
</div>
</div>
<!-- END header-with-meta-margin component --><!-- START header-with-meta-link component -->
<div class="heading-with-meta heading-with-meta--link">
<h2>Heading with link</h2>
<div class="heading-with-meta__meta">
<a aria-label="See all" class="icon-inline--right icon--chevron-right-denim_link" href="#">See <strong>all</strong></a>
</div>
</div>
<!-- END header-with-meta-link component -->
Content with meta
<!-- 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">Consequuntur</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