Aeroporto di Bologna - Design System

Metadata: Image 

<dl class="c-metadata">
    <dt class="c-metadata__heading">
        Tipo di Carta
    </dt>
    <dd class="c-metadata__description">
        <img class="img" src="/images/svgs/visa.svg" alt="Visa">
        4030 **** **** 3030
    </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": "Tipo di Carta",
  "description": {
    "text": "4030 **** **** 3030",
    "img": {
      "src": "/images/svgs/visa.svg",
      "alt": "Visa"
    }
  }
}
  • 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.