Container
For setting contents of varying complexity inside a fixed space.
React Component
Default
Small (max 340px)
Usage: sage-container(sm)
Medium (max 520px)
Usage: sage-container(md)
Large (max 700px)
Usage: sage-container(lg)
Full (max 1064px)
Usage: sage-container(full)
Sage Component
SageContainer
<h3>Default</h3>
<% SageTokens::CONTAINER_SPECS.each do | c | %>
<%= sage_component SageContainer, { size: c[:alias] } do %>
<%= sage_component SageCard, {} do %>
<%= sage_component SageCardHeader, {
title: md("#{c[:name]} (max `#{c[:max_size]}`)")
} %>
<p>Usage: <code><%= c[:usage] %></code></p>
<% end %>
<% end %>
<% end %>
| Property | Description | Type | Default |
|---|---|---|---|
|
Sets the maximum size for the container. |
|
|