Expandable Card

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

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

<%= md("
#### Custom Header

A custom header can be applied using the `sage_expandable_card_custom_header` section. This will replace the default header with the content provided.
This should be used in conjunction with the `align_trigger` option.

", use_sage_type: true) %>

<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
  align_arrow_right: true,
  align_trigger: "left",
} do %>
  <% content_for :sage_expandable_card_custom_header do %>
    <p>This is custom header content with trigger to left</p>
  <% end %>
  <%= 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 %>

<%= sage_component SageExpandableCard, {
  trigger_label: "Expand",
  align_arrow_right: true,
  align_trigger: "right",
} do %>
  <% content_for :sage_expandable_card_custom_header do %>
    <p>This is custom header content with trigger to right</p>
  <% end %>
  <%= 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`
`align_trigger`	Aligns trigger button to left or right. Can be used in conjunction with the `sage_expandable_card_custom_header` section.	`"left"`, `"right"`	`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`
`sage_expandable_card_custom_header`	This area can be used in order to provide custom header content. This should be used in conjunction with the `align_trigger` option.