Card Highlight

A special highlight edge to apply to Card components.


React Component

Default

This card has a default settings.

Placement

Highlight on top.

Highlight to right.

Highlight to bottom.

Colors

Highlighted with primary

Highlighted with sage

Highlighted with yellow

Highlighted with red

Highlighted with orange

Highlighted with purple

Highlighted with charcoal

Highlighted with grey

Highlighted with white

Highlighted with black

Highlighted with custom color:
#00ffaa

Highlighted with custom color:
rgba(100%, 50%, 45%)

Highlighted with custom color:
rgba(0, 15, 250, 0.5)

Note: While highlights may often be just decorative, the value property can be provided to provided semantic and accessible labels for this highlight. Internal content can also be provided compositionally but will be wrapped with visually-hidden.

1-on-1 Meeting w/ Julie

Tue, Jan 12, 2021, 3:00pm

Sage Component

SageCardHighlight
<!-- Default -->
<h4>Default</h4>
<%= sage_component SageCard, {} do %>
  <p>This card has a default settings.</p>
  <%= sage_component SageCardHighlight, {} %>
<% end %>

<h4>Placement</h4>
<%= sage_component SagePanelTiles, { tiles_in_row: 3 } do %>
  <%= sage_component SageCard, {} do %>
    <p>Highlight on top.</p>
    <%= sage_component SageCardHighlight, { position: "top" } %>
  <% end %>
  <%= sage_component SageCard, {} do %>
    <p>Highlight to right.</p>
    <%= sage_component SageCardHighlight, { position: "right" } %>
  <% end %>
  <%= sage_component SageCard, {} do %>
    <p>Highlight to bottom.</p>
    <%= sage_component SageCardHighlight, { position: "bottom" } %>
  <% end %>
<% end %>

<h4>Colors</h4>
<%= sage_component SagePanelTiles, { tiles_in_row: 3 } do %>
  <% SageTokens::COLORS.each do | color | %>
    <%= sage_component SageCard, {} do %>
      <p>Highlighted with <%= color %></p>
      <%= sage_component SageCardHighlight, { color: color } %>
    <% end %>
  <% end %>
  <% ["#00ffaa", "rgba(100%, 50%, 45%)", "rgba(0, 15, 250, 0.5)"].each do | color | %>
    <%= sage_component SageCard, {} do %>
      <%= md("Highlighted with custom color: <br /> `#{color}`") %>
      <%= sage_component SageCardHighlight, { custom_color: color } %>
    <% end %>
  <% end %>
<% end %>

<%= md("
**Note:** While highlights may often be just decorative,
the `value` property can be provided to provided semantic
and accessible labels for this highlight.
Internal content can also be provided compositionally
but will be wrapped with `visually-hidden`.
") %>

<%= sage_component SageCard, {} do %>
  <%= sage_component SageCardHeader, { title: "1-on-1 Meeting w/ Julie" } %>
  <p class="t-sage-body-small t-sage--grey">Tue, Jan 12, 2021, 3:00pm</p>
  <%= sage_component SageCardHighlight, { value: "1-on-1 Meeting type" } %>
<% end %>
Property Description Type Default

color

Provide a color from within the Sage color system.

One of the system colors: primary, grey, etc.

primary

custom_color

Provide a custom css color value (hex, rgb, rgba, etc.) for the highlight instead of a system color.

String

nil

position

The highlight can be applied to any of the four sides of the card.

One of the following: top, right, bottom, or left.

left

value

Sets the value to be used for aria-label if provided. Otherwise aria-hidden is set to true.

String

nil