Skip to content

Latest commit

 

History

History

banner

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

styles

styles

 
 

readme.md

readme.md

 
 

readme.md

Willow-Banner

Demo

A banner is a highlighted area of a page used to call out a single piece of information or action. This area is typically styled to stand out visually from the rest of the page’s content and can contain a concise heading, sentence and action component such as a willow-button.

A banner's background spans the full width of the screen/viewport while its content is restricted to the width of the .container-fluid. It cannot contain multiple columns. The banner component has a default background color but this color can be updated by a developer either by updating the $component-banner-background-color variable (which will update all banner backgrounds), or by adding a unique class name to the banner and adding new styling.

HTML Snippet

<section class="willow-banner" role="region">
  <div class="container-fluid">
    <div class="willow-banner__icon"></div>
    <h1 class="willow-banner__heading">Heading Text</h1>
    <div class="willow-banner__content">
        <!-- insert components here -->
    </div>
    <ul class="willow-banner__actions">
        <li class="willow-banner__action"><!-- insert action component here --></li>
    </ul>
  </div>
</section>

Elements

willow-banner

  • Required
  • Restrictions
    • Should Contain: the Bootstrap .container-fluid element

Notes

  • The use of role="region" with the <section> element ensures that willow-banner is accessible for user agents that do not support HTML5. The use of both <section> and <role="region"> together may create a warning in an HTML validator but we left this pattern intact for now to cover all of our accessibility bases.
  • To change the background-color on all banners you can set the $component-banner-background-color variable to a new color value. If you want to change the color for just one or a few banners you can add a unique class to each banner and style the background-color property for that class.

container-fluid

  • Required
  • Restrictions
    • Should Contain: willow-banner elements

Notes

  • The container-fluid class from Bootstrap is used within willow-banner to restrict the width of the component's content while allowing styles applied to the main willow-banner block to span the full-width of the willow-page-container component.

willow-banner__icon

  • Optional
  • Restrictions
    • Should Contain: Nothing

Notes

  • To include an icon image in willow-banner__icon you will need to add your own class to the element and target that in your SCSS/CSS and set the background-image property. Adding a new class allows the icon to be different on each banner. If you set the background image using the .willow-banner__icon class every banner on your site will have the same icon.
  • Additionally, if your icon is populated dynamically via a CMS, you can use a style attribute to set the icon. This can be done in this way: <div class="willow-banner__icon" style="background-image: url(...)"></div>

willow-banner__heading

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • willow-banner__heading is visible by default and even if it is hidden, it is required to meet accessibility standards
  • To hide the willow-banner__heading add the sr-only utility class to the element

willow-banner__content

  • Required
  • Restrictions
    • Should Contain: one or more components

willow-banner__actions

  • Optional
  • Restrictions
    • Should Contain: one or more willow-banner__action elements

willow-banner__action

  • Optional
  • Repeatable
  • Restrictions
    • Should Contain: one actionable component (such as willow-button or a link)