Message

Message pattern

Hi, I'm a message!

<div class="Message ">
  <p>Hi, I'm a message!</p>
</div>

Message with close button.

<div class="Message ">
  <p>Message with close button.</p>
  <button class="Message-close">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="Message-close-title">
      <title id="Message-close-title">Close</title>

      <g transform="rotate(45 12 12)" fill="none" stroke="currentColor"
       stroke-width="4" stroke-linecap="round">
        <line x1="12" y1="3" x2="12" y2="21" />
        <line x1="3" y1="12" x2="21" y2="12" />
      </g>
    </svg>
  </button>
</div>

You seem to be offline at the moment. We’ll keep trying to connect. Try again

<div class="Message Message--warning">
  <p>You seem to be offline at the moment.
    <span class="u-hidden u-md-inlineBlock">We&rsquo;ll keep trying to connect.</span> <a href=".">Try again</a></p>
  <button class="Message-close">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="Message-close-title">
      <title id="Message-close-title">Close</title>

      <g transform="rotate(45 12 12)" fill="none" stroke="currentColor"
       stroke-width="4" stroke-linecap="round">
        <line x1="12" y1="3" x2="12" y2="21" />
        <line x1="3" y1="12" x2="21" y2="12" />
      </g>
    </svg>
  </button>
</div>