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">Aut</button>
</div>
</div>
<!-- END header-with-meta 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">Voluptas</button>
</div>
</div>
<!-- END content-with-meta component -->
<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>