<!-- 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 %>