<div class="summary">
    <header class="summary__header">
        <h5 class="summary__headline">Allgemeine Angaben</h5>
        <a class="icon-block summary__link" href="#">
            <svg class="icon icon-block__icon icon--internal-link" id="icon-7a58" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Bearbeiten
        </a>
    </header>
    <dl class="summary__list">
        <dt class="summary__list-title">Ich bin</dt>
        <dd class="summary__list-description">Arbeitnehmer</dd>
        <dt class="summary__list-title">bei</dt>
        <dd class="summary__list-description">AOK - Die Gesundheitskasse für Niedersachsen</dd>
        <dt class="summary__list-title">bisher</dt>
        <dd class="summary__list-description">gesetzlich familienversichert</dd>
    </dl>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render summary
.summary&attributes(attr)
  if headline || link
    header.summary__header
      if headline
        h5.summary__headline #{headline}

      if link
        != include('@icon-block', { link: '#', text: link.title, icon: link.icon, attr: { class: 'summary__link' } })

  if items
    dl.summary__list
      each item in items
        dt.summary__list-title #{item.title}
        dd.summary__list-description #{item.description}
{
  "headline": "Allgemeine Angaben",
  "link": {
    "title": "Bearbeiten",
    "icon": "internal-link"
  },
  "items": [
    {
      "title": "Ich bin",
      "description": "Arbeitnehmer"
    },
    {
      "title": "bei",
      "description": "AOK - Die Gesundheitskasse für Niedersachsen"
    },
    {
      "title": "bisher",
      "description": "gesetzlich familienversichert"
    }
  ]
}
  • Content:
    .summary {
      padding-bottom: 3rem;
      padding-top: 2rem;
    }
    
    .summary__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    
    .summary__headline {
      color: $color-blue;
      font-size: 1.7rem;
    }
    
    .summary__link {
      font-size: 1.5rem;
    }
    
    .summary__list {
      @include clearfix();
    
      font-size: 1.2rem;
    
      @include mq($from: m) {
        font-size: 1.5rem;
      }
    }
    
    .summary__list-title {
      clear: left;
      float: left;
      width: 40%;
    }
    
    .summary__list-description {
      float: right;
      margin-left: 0;
      width: 60%;
    }
    
    .summary__list-title,
    .summary__list-description {
      margin-bottom: 1.5rem;
    
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/summary/summary.scss
  • Filesystem Path: src/components/molecules/summary/summary.scss
  • Size: 656 Bytes

There are no notes for this item.