Barmer Fractal

Overview Buttons 

<style>
    .container-buttons__headline {
        margin-top: 64px;
        text-align: center;
    }

    @media (max-width: 640px) {
        .container-buttons__headline {
            font-size: 24px;
            line-height: 41px;
        }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .container-buttons__headline {
            font-size: 26px;
            line-height: 45px;
        }
    }

    @media (min-width: 1025px) {
        .container-buttons__headline {
            font-size: 33px;
            line-height: 56px;
        }
    }

    .container-buttons {
        display: grid;
        grid-template-rows: auto;
        margin: 16px auto 0;
        row-gap: 48px;
    }

    @media (max-width: 640px) {
        .container-buttons {
            grid-template-columns: 1fr;
        }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .container-buttons {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (min-width: 1025px) {
        .container-buttons {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    .container-buttons.navigation__row--main {
        margin-top: 16px;
        grid-template-areas: none;
        /* Overwriting header styling */
    }

    .variant {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 16px;
    }

    .variant.navigation__cta-wrapper {
        grid-area: unset;
        /* Overwriting header styling */
        justify-self: center;
    }

    .variant__button {}

    @media (max-width: 600px) {
        .variant__button {}
    }
</style>

<div class="o-teaser teaser--bannermodule cs--b">

    <h4 class="teaser__headline">
        Übersicht Buttons

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>Auf dieser Seite finden Sie alle Buttons</p>
    </div>

</div>

<div class="container-buttons__headline">
    Primary Buttons
</div>

<div class="container-buttons">
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--primary" type="button">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Primary</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--primary" type="button" disabled="disabled">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Primary Disabled</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--login btn--primary" href="https://barmerid.id.bconnect.barmer.de/auth" title="Meine BARMER">
                <span class="btn__text" aria-hidden="true">Meine BARMER</span><i class="a-icon icon--profile" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Login</p>
        </div>
    </div>
</div>

<div class="container-buttons__headline">
    Conversion Buttons
</div>

<div class="container-buttons">
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--conversion" type="button">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Conversion</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--conversion" type="button" disabled="disabled">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Conversion Disabled</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--login btn--conversion" href="https://barmerid.id.bconnect.barmer.de/auth" title="Meine BARMER">
                <span class="btn__text" aria-hidden="true">Meine BARMER</span><i class="a-icon icon--profile" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Login Conversion</p>
        </div>
    </div>
</div>

<div class="container-buttons__headline">
    Secondary Buttons
</div>

<div class="container-buttons">

    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--secondary" type="button">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Secondary</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--secondary" type="button" disabled="disabled">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Secondary Disabled</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--login btn--secondary" href="https://barmerid.id.bconnect.barmer.de/auth" title="Meine BARMER">
                <span class="btn__text" aria-hidden="true">Meine BARMER</span><i class="a-icon icon--profile" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Login Secondary</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--logged-in js-nav-sub-open" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn__initials" aria-hidden="true">CK</span><span class="btn__text">Meine BARMER</span></button>
        </div>
        <div class="variant__label">
            <p>Button Logged-in</p>
        </div>
    </div>
</div>

<div class="container-buttons__headline">
    Buttons in Header
</div>

<div class="container-buttons navigation__row--main">

    <div class="variant navigation__cta-wrapper">
        <div class="variant__button"> <a class="a-btn btn--login btn--primary" href="https://barmerid.id.bconnect.barmer.de/auth" title="Meine BARMER">
                <span class="btn__text" aria-hidden="true">Meine BARMER</span><i class="a-icon icon--profile" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Login</p>
        </div>
    </div>
    <div class="variant navigation__cta-wrapper">
        <div class="variant__button"> <button class="a-btn btn--logged-in js-nav-sub-open" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn__initials" aria-hidden="true">CK</span><span class="btn__text">Meine BARMER</span></button>
        </div>
        <div class="variant__label">
            <p>Button Logged-in</p>
        </div>
    </div>

</div>

<div class="container-buttons__headline">
    Sonstige Buttons
</div>

<div class="container-buttons">
    <div class="variant">
        <div class="variant__button"> <button class="a-btn " type="button">Button</button>
        </div>
        <div class="variant__label">
            <p>Button Default</p>
        </div>
    </div>
</div>

<div class="container-buttons__headline">
    Icon-Buttons
</div>

<div class="container-buttons">

    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--search" type="button" aria-label="Öffnet und schließt das Such-Interface auf mobilen Geräten" aria-expanded="false"><i class="a-icon icon--search" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Search</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--back" type="button">zurück<i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Back</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--close" type="button" aria-label="Schließt das Menü"><i class="a-icon icon--close" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Close</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--menu" type="button" aria-label="Öffnet und schließt die Navigation auf mobilen Geräten" aria-haspopup="menu" aria-expanded="false"><i class="a-icon icon--menu" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Menu</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--print" href="javascript:window.print();" title="Drucken">
                <i class="a-icon icon--print" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Print</p>
        </div>
    </div>

    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--previous" type="button" title="Vorige Seite"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Previous</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <button class="a-btn btn--next" type="button" title="Nächste Seite"><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
        </div>
        <div class="variant__label">
            <p>Button Next</p>
        </div>
    </div>

    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--facebook" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Facebook</p>
        </div>
    </div>

    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--twitter" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Twitter</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--instagram" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Instagram</p>
        </div>
    </div>

    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--youtube" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Youtube</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--linkedin" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Linkedin</p>
        </div>
    </div>

    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--xing" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Xing</p>
        </div>
    </div>
    <div class="variant">
        <div class="variant__button"> <a class="a-btn btn--socialmedia" href="whatsapp://send?text&#x3D;Krankenkasse%3A%20Starke%20Leistungen%20und%20Top-Service%20%7C%20BARMER%20https%3A%2F%2Fwww.barmer.de%2F" title="">
                <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
            </a>
        </div>
        <div class="variant__label">
            <p>Button Whatsapp</p>
        </div>
    </div>

</div>
 
<style>

  .container-buttons__headline {
    margin-top: 64px;
    text-align: center;
  }

  @media (max-width: 640px) {
    .container-buttons__headline {
      font-size: 24px;
      line-height: 41px;
    }
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .container-buttons__headline {
      font-size: 26px;
      line-height: 45px;
    }
  }
  @media (min-width: 1025px) {
    .container-buttons__headline {
      font-size: 33px;
      line-height: 56px;
    }
  }


  .container-buttons {
    display: grid;
    grid-template-rows: auto;
    margin: 16px auto 0;
    row-gap: 48px;
  }
  @media (max-width: 640px) {
    .container-buttons {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .container-buttons {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1025px) {
    .container-buttons {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  .container-buttons.navigation__row--main {
    margin-top: 16px;
    grid-template-areas: none; /* Overwriting header styling */
  }

  .variant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 16px;
  }
  .variant.navigation__cta-wrapper {
    grid-area: unset; /* Overwriting header styling */
    justify-self: center;
  }

  .variant__button {
  }

  @media (max-width: 600px) {
    .variant__button {
    }
  }
</style>

	{{render '@bannermodule--b-secondary-btn' this.partials.bannermoduleContent merge=true}}

<div class="container-buttons__headline">
  Primary Buttons
</div>

<div class="container-buttons">
  <div class="variant">
    <div class="variant__button">{{ render '@button--primary' merge=true }}</div>
    <div class="variant__label"><p>Button Primary</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--primary-disabled' merge=true }}</div>
    <div class="variant__label"><p>Button Primary Disabled</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--login-primary' merge=true }}</div>
    <div class="variant__label"><p>Button Login</p></div>
  </div>
</div>



<div class="container-buttons__headline">
  Conversion Buttons
</div>

<div class="container-buttons">
  <div class="variant">
    <div class="variant__button">{{ render '@button--conversion' merge=true }}</div>
    <div class="variant__label"><p>Button Conversion</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--conversion-disabled' merge=true }}</div>
    <div class="variant__label"><p>Button Conversion Disabled</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--login-conversion' merge=true }}</div>
    <div class="variant__label"><p>Button Login Conversion</p></div>
  </div>
</div>



<div class="container-buttons__headline">
  Secondary Buttons
</div>

<div class="container-buttons">

  <div class="variant">
    <div class="variant__button">{{ render '@button--secondary' merge=true }}</div>
    <div class="variant__label"><p>Button Secondary</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--secondary-disabled' merge=true }}</div>
    <div class="variant__label"><p>Button Secondary Disabled</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--login-secondary' merge=true }}</div>
    <div class="variant__label"><p>Button Login Secondary</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--login-with-user-initials' merge=true }}</div>
    <div class="variant__label"><p>Button Logged-in</p></div>
  </div>
</div>



<div class="container-buttons__headline">
  Buttons in Header
</div>

<div class="container-buttons navigation__row--main">

  <div class="variant navigation__cta-wrapper">
    <div class="variant__button">{{ render '@button--login-primary' merge=true }}</div>
    <div class="variant__label"><p>Button Login</p></div>
  </div>
  <div class="variant navigation__cta-wrapper">
    <div class="variant__button">{{ render '@button--login-with-user-initials' merge=true }}</div>
    <div class="variant__label"><p>Button Logged-in</p></div>
  </div>

</div>



<div class="container-buttons__headline">
  Sonstige Buttons
</div>

<div class="container-buttons">
  <div class="variant">
    <div class="variant__button">{{ render '@button--default' merge=true }}</div>
    <div class="variant__label"><p>Button Default</p></div>
  </div>
</div>



<div class="container-buttons__headline">
  Icon-Buttons
</div>

<div class="container-buttons">

  <div class="variant">
    <div class="variant__button">{{ render '@button--search' merge=true }}</div>
    <div class="variant__label"><p>Button Search</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--back' merge=true }}</div>
    <div class="variant__label"><p>Button Back</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--close' merge=true }}</div>
    <div class="variant__label"><p>Button Close</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--menu' merge=true }}</div>
    <div class="variant__label"><p>Button Menu</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--print' merge=true }}</div>
    <div class="variant__label"><p>Button Print</p></div>
  </div>

  <div class="variant">
    <div class="variant__button">{{ render '@button--previous' merge=true }}</div>
    <div class="variant__label"><p>Button Previous</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--next' merge=true }}</div>
    <div class="variant__label"><p>Button Next</p></div>
  </div>

  <div class="variant">
    <div class="variant__button">{{ render '@button--facebook' merge=true }}</div>
    <div class="variant__label"><p>Button Facebook</p></div>
  </div>

  <div class="variant">
    <div class="variant__button">{{ render '@button--twitter' merge=true }}</div>
    <div class="variant__label"><p>Button Twitter</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--instagram' merge=true }}</div>
    <div class="variant__label"><p>Button Instagram</p></div>
  </div>

  <div class="variant">
    <div class="variant__button">{{ render '@button--youtube' merge=true }}</div>
    <div class="variant__label"><p>Button Youtube</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--linkedin' merge=true }}</div>
    <div class="variant__label"><p>Button Linkedin</p></div>
  </div>

  <div class="variant">
    <div class="variant__button">{{ render '@button--xing' merge=true }}</div>
    <div class="variant__label"><p>Button Xing</p></div>
  </div>
  <div class="variant">
    <div class="variant__button">{{ render '@button--whatsapp' merge=true }}</div>
    <div class="variant__label"><p>Button Whatsapp</p></div>
  </div>

</div>
 
{
  "switches": {
    "hasContactFlyout": "true"
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "bannermoduleContent": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Übersicht Buttons",
            "richtext": "<p>Auf dieser Seite finden Sie alle Buttons</p>"
          }
        }
      }
    }
  }
}

No notes defined.