Page announcement

Use a page annoucement to alert a user to important new information. Colour variations are possible for different kinds of content.

Payment successful

More detail about the announcement.

<section class="lbh-page-announcement">
  <h3 class="lbh-page-announcement__title">Payment successful</h3>
  <div class="lbh-page-announcement__content">
    More detail about the announcement.
  </div>
</section>

Warning#

Don't use the warning variant to show errors caused by user input. Instead, use the error summary.

Payment unsuccessful

More detail about the announcement.

<section class="lbh-page-announcement lbh-page-announcement--warning">
  <h3 class="lbh-page-announcement__title">Payment unsuccessful</h3>
  <div class="lbh-page-announcement__content">
    More detail about the announcement.
  </div>
</section>

Information#

I am information

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

I am a list lorem ipsum dolor sit amet
I am a list lorem ipsum dolor sit amet
I am a link

<section class="lbh-page-announcement lbh-page-announcement--info">
  <h3 class="lbh-page-announcement__title">I am information</h3>
  <div class="lbh-page-announcement__content">
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
      fugit.
    </p>
    <ul>
      <li>I am a list lorem ipsum dolor sit amet</li>
      <li>I am a list lorem ipsum dolor sit amet</li>
      <li><a href="#">I am a link</a></li>
    </ul>
  </div>
</section>