Welcome to the team.

Lorem ipsum dolor sit amet. I forget the rest of lorem ipsum and don't want to look it up, so here's this instead.

Save Go Back

<div class='card p-0 border-b-0'>
  <div class='p-4'>
    <h2 class='heading text-xl mb-1'>Welcome to the team.</h2>
    <p>Lorem ipsum dolor sit amet. I forget the rest of lorem ipsum and don't want to look it up, so here's this instead.</p>
  </div>
  <section class='section ~info p-4'>
    <span class='button ~info @high'>Save</span>
    <span class='button bg-transparent'>Go Back</span>
  </section>
</div>

---

Overview

Sections are a utility element for applying context-aware text and background colors to a section of your layout. It has no padding; it has no border; it has no box shadow. It’s there to make your life easier when incorporating color and priority into your interface.

The .section element is responsible for the color in cards and asides.

Considerations

Low level — The .section element is very low level. In some cases, more specific elements, like cards and asides, are more appropriate.

Variants

Sections have full tone and priority support. (They are the primary way that tones and priorities are implemented!)

Low Priority

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Example code

<div class="md:grid grid-cols-2 gap-4">
  
  <section class="section ~neutral !low">Sections aren't meant to be used alone.</section>
  
  <section class="section ~positive !low">Sections aren't meant to be used alone.</section>
  
  <section class="section ~warning !low">Sections aren't meant to be used alone.</section>
  
  <section class="section ~critical !low">Sections aren't meant to be used alone.</section>
  
  <section class="section ~info !low">Sections aren't meant to be used alone.</section>
  
  <section class="section ~urge !low">Sections aren't meant to be used alone.</section>
  
</div>

High Priority

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Sections aren't meant to be used alone.

Example code

<div class="md:grid grid-cols-2 gap-4">
  
  <section class="section ~neutral !high">Sections aren't meant to be used alone.</section>
  
  <section class="section ~positive !high">Sections aren't meant to be used alone.</section>
  
  <section class="section ~warning !high">Sections aren't meant to be used alone.</section>
  
  <section class="section ~critical !high">Sections aren't meant to be used alone.</section>
  
  <section class="section ~info !high">Sections aren't meant to be used alone.</section>
  
  <section class="section ~urge !high">Sections aren't meant to be used alone.</section>
  
</div>

Accessibility

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

---