Banners

Usage

Banner text is limited to 1 line. If there are primary and secondary actions, the secondary action should be flat and the primary action should be raised (the React component takes care of this automatically).

/ The primary_action and secondary_action arguments can accept a link or :dismiss symbol.
/ Passing :dismiss will render a button that can dismiss the banner.

= banner(text: "This is banner text. Banner text is centered vertically"\
           " within the banner container and is limited to one line.",
         primary_action: link_to("Action", "/banners#anchor", class: "btn btn-primary"),
         secondary_action: :dismiss)

/*
 * The primaryAction and secondaryAction attributes accept objects with arguments to
 * construct buttons.
 *
 * Passing { dismiss: true } will render a button that can dismiss the banner.
 */

import { Banner } from 'n2-styles'

function myComponent(props) {
  const text = `
    This is banner text. Banner text is centered vertically
    within the banner container and is limited to one line.
  `;
  const primaryAction = { text: "Action", link: "#" };
  const secondaryAction = { dismiss: true };

  return (
    <Banner text={text}
       primaryAction={primaryAction}
       secondaryAction={secondaryAction} />
  );
}

<div class="banner z-depth-1">
  <nav class="navbar n2-navbar justify-content-between px-3 py-2 white">
    <div class="banner-text-parent">
      <div class="banner-text">
        This is banner text. Banner text is centered vertically
        within the banner container and is limited to one line.
      </div>
    </div>
    <div class="banner-action d-flex align-items-center">
      <div class="pr-3">
        <button class="btn-flat dismiss-banner" type="button">Dismiss</button>
      </div>
      <a class="btn btn-primary" href="#">Action</a>
    </div>
  </nav>
</div>

Info Banners

Info banners are small banners for displaying general information and warnings in-line with content.

/ These helper methods have an optional `add_class` argument to add more CSS classes to the banner itself.

= info_banner add_class: "mb-2" do
  This is an informational banner. Use this banner for general information.

= warning_banner add_class: "mb-2" do
  This is a warning banner. Use this banner for pertinent information.

= danger_banner add_class: "mb-2" do
  This is a danger banner. Use this banner call attention to extremely important information
  that may cause problems if ignored.

import { InfoBanner } from 'n2-styles'

function myComponent(props) {
  /*
   * The InfoBanner accepts optional `className` and `type` arguments.
   * `type` can be 'info', 'warning', or 'danger' and defaults to 'info' if left blank.
   */
  return (
    <InfoBanner className='mb-2'>
      This is an informational banner. Use this banner for general information.
    </InfoBanner>
    <InfoBanner className='mb-2' type='warning'>
      This is a warning banner. Use this banner for pertinent information.
    </InfoBanner>
    <InfoBanner className='mb-2' type='danger'>
      This is a danger banner. Use this banner call attention to extremely important
      information that may cause problems if ignored.
    </InfoBanner>
  );
}

<div class="align-items-center d-flex font-italic text-info mb-2">
  <i class="material-icons h3-responsive" aria-label="Info">info</i>
  <div class="pl-2">This is an informational banner. Use this banner for general information.</div>
</div>
<div class="align-items-center d-flex font-italic text-warning mb-2">
  <i class="material-icons h3-responsive" aria-label="Warning">warning</i>
  <div class="pl-2">This is a warning banner. Use this banner for pertinent information.</div>
</div>
<div class="align-items-center d-flex font-italic text-danger mb-2">
  <i class="material-icons h3-responsive" aria-label="Alert">cancel</i>
  <div class="pl-2">
    This is a danger banner. Use this banner call attention to extremely
    important information that may cause problems if ignored.
  </div>
</div>