Expandable Card
Card that can be expanded and collapsed in order to display additional content.
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 |
---|---|---|---|
|
Adds the |
Boolean |
|
|
Adds the |
Boolean |
|
|
Adds border and background to body. |
Boolean |
|
|
Adds the |
Boolean |
|
|
Sets the text for the trigger button. |
String |
|