ClearFractal

Metadata: Pill Style 

<dl class="Metadata">
    <dt class="Metadata-heading">Our team</dt>
    <dd class="Metadata-description Pill">Dr. Vivian Moen, Principal Integration Coordinator</dd>
    <dd class="Metadata-description Pill">Berenice Marquardt, Customer Usability Administrator</dd>
    <dd class="Metadata-description Pill">Camryn Keebler, District Security Analyst</dd>
    <dd class="Metadata-description Pill">Sonia Mosciski, Investor Brand Designer</dd>
</dl>
<!--/.MetaData-->
 
<dl class="Metadata">
    <dt class="Metadata-heading">{{metadataHeading}}</dt>
    {% for item in items %}
    <dd class="Metadata-description{% if metadataPill %} Pill{% endif %}">{{item.metadata}}</dd>
    {% endfor %}
</dl><!--/.MetaData-->
 
{
  "metadataHeading": "Our team",
  "items": [
    {
      "metadata": "Dr. Vivian Moen, Principal Integration Coordinator"
    },
    {
      "metadata": "Berenice Marquardt, Customer Usability Administrator"
    },
    {
      "metadata": "Camryn Keebler, District Security Analyst"
    },
    {
      "metadata": "Sonia Mosciski, Investor Brand Designer"
    }
  ],
  "metadataPill": true
}

The MetaData pattern typically accompanies another section of content and its job is to show meta information. The content of the MetaData pattern should be very short, usually only a few words. It could take the form of a definition list.