hkk Frontend 2017

Button-Box 

<!-- 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-e183" 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-5774" 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-46e9" 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-7d94" 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-0f2c" 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-e534" 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>
    <button class="copyright js-tooltip button-box__copyright" title="hkk-Vorteile für jede Lebensphase" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-a6d5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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-5e08" 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-ce48" 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-1d79" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>Infomaterial per Post
            </a>
        </div>
    </div>
    <button class="copyright js-tooltip button-box__copyright" title="hkk-Vorteile für jede Lebensphase" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-4dea" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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-9d16" 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-f986" 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-ce86" 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-ee58" 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-5619" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>Infomaterial per Post mit sehr langem Titel
            </a>
        </div>
    </div>
    <button class="copyright js-tooltip button-box__copyright" title="hkk-Vorteile für jede Lebensphase" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-cd32" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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'}})

  //- Copyright
  if copyright
    != include('@copyright', {title: copyright, attr: {class: 'button-box__copyright'}})
 
/* Targets */
{
  "headline": "hkk-Vorteile für jede Lebensphase",
  "copyright": "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?",
  "copyright": "hkk-Vorteile für jede Lebensphase",
  "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?",
  "copyright": "hkk-Vorteile für jede Lebensphase",
  "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;
  position: relative;

  // 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;
  }
}

.button-box__copyright { 
  bottom: 0;
  position: absolute;
  right: 0;
}
  • URL: /components/raw/button-box/button-box.scss
  • Filesystem Path: src/components/organisms/button-box/button-box.scss
  • Size: 1.7 KB

There are no notes for this item.