Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Banner

Usage notes

Banners are used to highlight information to users, usually used with cards.

Default


        <coral-banner>
          <coral-banner-header>Info</coral-banner-header>
          <coral-banner-content>For great success, configure the whozit.</coral-banner-content>
        </coral-banner>

Error

Toggle markup


        <coral-banner variant="error">
          <coral-banner-header>Error</coral-banner-header>
          <coral-banner-content>There is something borked!</coral-banner-content>
        </coral-banner>

Warning

Toggle markup


        <coral-banner variant="warning">
          <coral-banner-header>Warning</coral-banner-header>
          <coral-banner-content>Something is about to go wrong!</coral-banner-content>
        </coral-banner>