Expandable Card

Card that can be expanded and collapsed in order to display additional content.


React Component

Expanded (Open state)

Bordered

No Border

Arrow Aligned Right

Sage Component

SageExpandableCard
<h3 class="t-sage-heading-6">Expanded (Open state)</h3>
<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
  expanded: true
} do %>
  <%= sage_component SageCheckbox, {
    id:"c1",
    label_text: "Grant offers",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c2",
    label_text: "Add tags",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c3",
    label_text: "Subscribe to emails",
    checked: false,
    disabled: false,
    has_error: false
  } %>
<% end %>
<h3 class="t-sage-heading-6">Bordered</h3>
<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
  body_bordered: true,
} do %>
  <%= sage_component SageCheckbox, {
    id:"c1",
    label_text: "Grant offers",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c2",
    label_text: "Add tags",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c3",
    label_text: "Subscribe to emails",
    checked: false,
    disabled: false,
    has_error: false
  } %>
<% end %>
<h3 class="t-sage-heading-6">No Border</h3>
<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
} do %>
  <%= sage_component SageCheckbox, {
    id:"c4",
    label_text: "Grant offers",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c5",
    label_text: "Add tags",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c6",
    label_text: "Subscribe to emails",
    checked: false,
    disabled: false,
    has_error: false
  } %>
<% end %>
<h3 class="t-sage-heading-6">Arrow Aligned Right</h3>
<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
  align_arrow_right: true,
} do %>
  <%= sage_component SageCheckbox, {
    id:"c4",
    label_text: "Grant offers",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c5",
    label_text: "Add tags",
    checked: false,
    disabled: false,
    has_error: false
  } %>
  <%= sage_component SageCheckbox, {
    id:"c6",
    label_text: "Subscribe to emails",
    checked: false,
    disabled: false,
    has_error: false
  } %>
<% end %>
Property Description Type Default

align_arrow_right

Adds the sage-expandable-card--align-arrow-right class to the block level sage-expandable-card. Aligns the arrow to the far right of the container.

Boolean

nil

expanded

Adds the sage-expandable-card--expanded class to the block level sage-expandable-card and allows you to load the expandable card body expanded

Boolean

nil

body_bordered

Adds border and background to body.

Boolean

nil

sage_type

Adds the sage-type HTML class on the body in order to ease content formatting within it.

Boolean

false

trigger_label

Sets the text for the trigger button.

String

nil