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`

Expandable Card

Expanded (Open state)

Bordered

No Border

Arrow Aligned Right