hkk Frontend 2017

Zusammenfassung 

<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-ab8d" 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.