Subtle Modifier

The .subtle class creates elements with a muted, reduced-opacity background and softened colors. This style is useful for secondary actions where you want a subdued but still contextually colored appearance.

.subtle can be combined with Intent Variants like .secondary, .success, etc. for different color variations.

Buttons

Apply .subtle to <button> elements:

See code

<section class="auto-grid">
  <button class="primary subtle">
    Button
  </button>
  <button class="secondary subtle">
    Button
  </button>
  <button class="contrast subtle">
    Button
  </button>
  <button class="success subtle">
    Button
  </button>
  <button class="info subtle">
    Button
  </button>
  <button class="warning subtle">
    Button
  </button>
  <button class="danger subtle">
    Button
  </button>
</section>

Input Buttons

Like <input type="submit"> and <input type="reset">:

See code

<section>
  <input class="subtle" type="button" value="Input Button" />
  <input class="subtle" type="submit" value="Input Submit" />
  <input class="subtle" type="reset" value="Input Reset" />
</section>

Role Buttons

Any HTML element with [role="button"]:

See code

<section>
  <section class="primary subtle" role="button">
    &lt;section&gt; as button
  </section>
    <section class="secondary subtle" role="button">
    &lt;section&gt; as button
  </section>
    <section class="contrast subtle" role="button">
    &lt;section&gt; as button
  </section>
    <section class="success subtle" role="button">
    &lt;section&gt; as button
  </section>
  <section class="info subtle" role="button">
    &lt;section&gt; as button
  </section>
  <section class="warning subtle" role="button">
    &lt;section&gt; as button
  </section>
  <section class="danger subtle" role="button">
    &lt;section&gt; as button
  </section>
  
  <hr>
  
  <div class="mb-d">
    <details>
      <summary class="primary subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="secondary subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="contrast subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="success subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="info subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="warning subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
    <div class="mb-d">
    <details>
      <summary class="danger subtle" role="button" aria-haspopup="menu">
        Dropdown as a button
      </summary>
      <ul role="menu">
        <li><a role="menuitem" href="#">Solid</a></li>
        <li><a role="menuitem" href="#">Liquid</a></li>
        <li><a role="menuitem" href="#">Gas</a></li>
        <li><a role="menuitem" href="#">Plasma</a></li>
      </ul>
    </details>
  </div>
</section>

Cards

.subtle can also be applied to other elements or components, such as cards, to create a transparent background with colored borders and text.

See code

<section>
  <div class="card primary subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card secondary subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card contrast subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card success subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card info subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card warning subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card danger subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
</section>