<h3 class="t-sage-heading-6">Default</h3>
<%= sage_component SageDataCard, {
  body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
  title: "Header Content",
  title_tag: "h2",
} %>

<h3 class="t-sage-heading-6">Colors</h3>
<div class="sage-data-card-group">
  <%= sage_component SageDataCard, {
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
    title: "Default Color",
  } %>
  <%= sage_component SageDataCard, {
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    color: "muted",
    header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "skipped", style: "only" }}),
    title: "Muted Color",
  } %>
  <%= sage_component SageDataCard, {
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    color: "danger",
    header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "danger", icon: { name: "unmapped", style: "only" }}),
    title: "Danger Color",
  } %>
</div>

<h3 class="t-sage-heading-6">Inline/Scrolling Layout</h3>
<div class="sage-data-card-scroll-container">
  <div class="sage-data-card-scroll">
    <div class="sage-data-card-group sage-data-card-group--danger">
      <p class="sage-data-card-group__title">Group 1</p>
      <div class="sage-data-card-group__items">
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          color: "danger",
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "danger", icon: { name: "unmapped", style: "only" }}),
          title: "Field 1",
        } %>
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "danger", icon: { name: "unmapped", style: "only" }}),
          title: "Field 2",
          title_tag: "h3",
        } %>
      </div>
    </div>
    <div class="sage-data-card-group">
      <p class="sage-data-card-group__title">Group 2</p>
      <div class="sage-data-card-group__items">
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
          title: "Field 3",
        } %>
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
          title: "Field 4",
        } %>
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
          title: "Field 5",
        } %>
        <%= sage_component SageDataCard, {
          body: %(
            <p>Lorem ipsum dolor sit amet</p>
            <p>Consectetur adipiscing elit</p>
            <p>Sed do eiusmod tempor incididun</p>
            <p>Ut labore et dolore magna aliqua.</p>
          ),
          header_aside: sage_component(SageButton, { value: "Options", subtle: true, style: "secondary", icon: { name: "mapped", style: "only" }}),
          title: "Field 6",
          title_tag: "h6",
        } %>
      </div>
    </div>
  </div>
</div>