Outline Color

Utility	Properties
Failed to load data. Please try again later.

This example showcases various outline colors using the indigo colors from the default color palette.

• The oc-indigo-3 utility applies a lighter indigo shade to the outline of an element.
• The oc-indigo utility applies the base indigo shade to the outline of an element.
• The oc-indigo-8 utility applies a darker indigo shade to the outline of an element.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-1 bc-indigo d-16 oc-indigo-3 oo-1 os-s rad-1"></div>
  <div class="b-1 bc-indigo d-16 oc-indigo oo-1 os-s rad-1"></div>
  <div class="b-1 bc-indigo d-16 oc-indigo-8 oo-1 os-s rad-1"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

Alternatively, you can apply :hover by using h:oc-* utility to override elements and change their values when hovering over them.

<div class="oc-lead h:oc-indigo ..."></div>