<!-- Targets -->
<div class="button-box button-box--two-columns">
    <div class="button-box__inner">
        <div class="button-box__headline">
            <h1 class="headline headline--display-2">hkk-Vorteile für jede Lebensphase
            </h1>
        </div>
        <div class="button-box__buttons">
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-employed" id="icon-7229" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg>Berufstätige
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-self-employed" id="icon-b9dd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg>Selbstständige
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-trainee" id="icon-5104" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-trainee"></use>
</svg>Azubis
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-student" id="icon-0706" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-student"></use>
</svg>Studierende
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-young-family" id="icon-ad04" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-young-family"></use>
</svg>Junge Familien
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--big-company" id="icon-ec29" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-company"></use>
</svg>Firmen mit sehr langem Titel und noch viel weiter
            </a>
        </div>
    </div>
</div>

<!-- Member -->
<div class="button-box">
    <div class="button-box__inner">
        <div class="button-box__headline">
            <h1 class="headline headline--display-2">Noch kein Mitglied der hkk?
            </h1>
        </div>
        <div class="button-box__buttons">
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--online-consulting" id="icon-ef9c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-online-consulting"></use>
</svg>Online-Antrag
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--form" id="icon-f323" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>Antrag als PDF
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--mail" id="icon-34a5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>Infomaterial per Post
            </a>
        </div>
    </div>
</div>

<!-- Uneven -->
<div class="button-box button-box--two-columns">
    <div class="button-box__inner">
        <div class="button-box__headline">
            <h1 class="headline headline--display-2">Noch kein Mitglied der hkk?
            </h1>
        </div>
        <div class="button-box__buttons">
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--online-consulting" id="icon-30dc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-online-consulting"></use>
</svg>Online-Antrag
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--form" id="icon-79de" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>Antrag als PDF
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--mail" id="icon-7cf4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>Infomaterial per Post
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--form" id="icon-8754" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>Antrag als PDF
            </a>
            <a class="icon-block button-box__button" href="#">
                <svg class="icon icon-block__icon icon--mail" id="icon-c27c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>Infomaterial per Post mit sehr langem Titel
            </a>
        </div>
    </div>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- More then 3 buttons?
  if (buttons && buttons.length > 3) {
    attr.class.push('button-box--two-columns');
  }

//- Render button box
.button-box&attributes(attr)
  .button-box__inner
    //- Headline
    if headline
      .button-box__headline
        != include('@headline--display-2', {text: headline})

    //- Buttons
    if buttons
      .button-box__buttons
        each button in buttons
          != include('@icon-block', {link: button.link, text: button.title, icon: button.icon, attr: {class: 'button-box__button'}})
/* Targets */
{
  "headline": "hkk-Vorteile für jede Lebensphase",
  "buttons": [
    {
      "link": "#",
      "icon": "big-employed",
      "title": "Berufstätige"
    },
    {
      "title": "Selbstständige",
      "link": "#",
      "icon": "big-self-employed"
    },
    {
      "title": "Azubis",
      "link": "#",
      "icon": "big-trainee"
    },
    {
      "title": "Studierende",
      "link": "#",
      "icon": "big-student"
    },
    {
      "title": "Junge Familien",
      "link": "#",
      "icon": "big-young-family"
    },
    {
      "title": "Firmen mit sehr langem Titel und noch viel weiter",
      "link": "#",
      "icon": "big-company"
    }
  ]
}

/* Member */
{
  "headline": "Noch kein Mitglied der hkk?",
  "buttons": [
    {
      "link": "#",
      "icon": "online-consulting",
      "title": "Online-Antrag"
    },
    {
      "title": "Antrag als PDF",
      "link": "#",
      "icon": "form"
    },
    {
      "title": "Infomaterial per Post",
      "link": "#",
      "icon": "mail"
    }
  ]
}

/* Uneven */
{
  "headline": "Noch kein Mitglied der hkk?",
  "buttons": [
    {
      "link": "#",
      "icon": "online-consulting",
      "title": "Online-Antrag"
    },
    {
      "title": "Antrag als PDF",
      "link": "#",
      "icon": "form"
    },
    {
      "title": "Infomaterial per Post",
      "link": "#",
      "icon": "mail"
    },
    {
      "title": "Antrag als PDF",
      "link": "#",
      "icon": "form"
    },
    {
      "title": "Infomaterial per Post mit sehr langem Titel",
      "link": "#",
      "icon": "mail"
    }
  ]
}

  • Content:
    .button-box {
      background-image: url('../images/default-page-background.jpg');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
    
      // HiDPI / retina
      @include mq($and: $hidpi) {
        background-image: url('../images/default-page-background@2x.jpg');
      }
    }
    
    .button-box__inner {
      @include make-container();
    
      @include mq($from: m) {
        display: flex;
        justify-content: space-between;
      }
    }
    
    .button-box__headline {
      padding: 2.5rem 2.5rem 2rem;
    
      @include mq($from: m) {
        padding-left: 0;
        padding-top: 3rem;
        width: 50%;
      }
    
      @include mq($from: l) {
        padding-top: 5rem;
        width: 33.33%;
      }
    
      @include mq($from: xl) {
        width: 30%;
      }
    }
    
    .button-box__buttons {
      font-size: 1.7rem;
      padding: 0 2.5rem 3rem;
    
      @include mq($from: m) {
        padding: 3rem 0 2rem;
        width: 50%;
      }
    
      @include mq($from: l) {
        padding: 5rem 0 3.5rem 1.25rem;
        width: 33.33%;
      }
    }
    
    .button-box--two-columns .button-box__buttons {
      @include mq($from: l) {
        column-count: 2;
        column-gap: 1.5rem;
        padding-left: 0;
        width: 66.66%;
      }
    }
    
    .button-box__button {
      background-color: rgba(#025593, 0.8);
      border-radius: 0.3rem;
      break-inside: avoid-column;
      display: flex;
      margin-bottom: 1.5rem;
      padding: 2.25rem 2rem;
    
      &:hover,
      &:focus {
        background-color: #025593;
      }
    
      &[href] {
        @include link(#fff, #fff);
    
        transition: background-color $default-transition-duration;
      }
    
      .icon-block__icon {
        color: #fff;
        font-size: 2.8rem;
        margin-right: 1.5rem;
        min-width: 2.8rem;
        vertical-align: -0.25em;
      }
    }
    
  • URL: /components/raw/button-box/button-box.scss
  • Filesystem Path: src/components/organisms/button-box/button-box.scss
  • Size: 1.6 KB

There are no notes for this item.