Get Orange

A Message explains nearby content. It can serve as a simple explanation cue or hold a button that triggers an action. It takes full width of it's parent.

Basic

Some text and a link.

HTML

    <div class="message">
  <div class="message__body">
    <p>
      Some text and a <a href="#">link</a>.
    </p>
  </div>
</div>

Colors

Heading

Body text
Heading

Body text
Heading

Body text
Heading

Body text
Heading

Body text

HTML

    <div class="message message--color-{color}">
  <div class="message__body">
    <h6>Heading</h6>
    <p>
      Body text
    </p>
  </div>
  <div class="message__action">
    <button type="button" class="button button--small button--color-{color}">
      action
    </button>
  </div>
</div>

With an avatar

Body text

HTML

    <div class="message message--color-{color}">
  <div class="avatar avatar--size-small avatar--circle">
    <svg viewBox="0 0 80 80" width="80px" height="auto" xmlns="http://www.w3.org/2000/svg">
      <path d="m28.6091684 41.6452381c3.2812101 2.1225413 7.1921206 3.3547619 11.3908316 3.3547619s8.1096215-1.2322206 11.3908316-3.3547619c16.5421837 4.9053348 28.6091684 20.2208507 28.6091684 38.3547619 0 22.09139-17.90861 40-40 40s-40-17.90861-40-40c0-18.1339112 12.0669847-33.4494271 28.6091684-38.3547619zm11.3908316.3547619c-9.9411255 0-18-8.0588745-18-18s8.0588745-18 18-18 18 8.0588745 18 18-8.0588745 18-18 18z" fill-rule="evenodd"></path>
    </svg>
  </div>
  <div class="message__body">
    <p>
      Body text
    </p>
  </div>
  <div class="message__action">
    <button type="button" class="button button--small button--color-{color}">
      action
    </button>
  </div>
</div>

No border radius

Meant to be used outside containers in order to take full browser width.

Heading

Body text

HTML

    <div class="message message--color-{color} message--full">
  <div class="message__body">
    <h6>Heading</h6>
    <p>
      Body text
    </p>
  </div>
</div>

Usage

Attribute	Description	Possible values	Type	Required	Default
color	Set with `.message--color-{color}` class	See Colors page	String	-	-
size	Set with `.message--full`. Meant to be used outside containers in order to take full browser width.	`full`	String	-	-