Aeroporto di Bologna - Design System

Metadata: Icon 

<dl class="c-metadata">
    <dt class="c-metadata__heading">
        Intestata a
    </dt>
    <dd class="c-metadata__description">
        <span class="icon"><svg class="c-icon--24 u-color-night-40">
                <use xlink:href="#ic-person-black-24px"></use>
            </svg></span>
        Mario Rossi
    </dd>
</dl>
 
<dl class="c-metadata{{#if modifier}} {{modifier}}{{/if}}">
  <dt class="c-metadata__heading">
    {{{ heading }}}
  </dt>
  <dd class="c-metadata__description">
    {{#if description.icon }}
    <span class="icon">{{> @icon description.icon }}</span>
    {{/if}}
    {{#if description.img }}
    <img class="img" src="{{ description.img.src }}" alt="{{ description.img.alt }}">
    {{/if}}
    {{{ description.text }}}
  </dd>
</dl>
 
{
  "heading": "Intestata a",
  "description": {
    "text": "Mario Rossi",
    "icon": {
      "symbol": "ic-person-black-24px",
      "class": "c-icon--24 u-color-night-40"
    }
  }
}
  • Content: 
    .c-metadata {
  display: flex;
  align-items: center;
}

.c-metadata + .c-metadata {
  margin-top: remify(16px);
}

.c-metadata__heading,
.c-metadata__description {
 @include font-scale(level-2);
 color: secondary(text, 100);
}

.c-metadata__description {
  display: inline-flex;
  align-items: center;
  margin-left: remify(24px);
}

.c-metadata .img,
.c-metadata .icon {
  margin-right: remify(8px);
}

.c-metadata .img {
  width: remify(30px);
}
  • URL: /components/raw/metadata/_metadata.scss
  • Filesystem Path: src/views/02-molecules/metadata/_metadata.scss
  • Size: 448 Bytes

No notes defined.