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

size

Sets the maximum size for the container. See the Layout Containers page.

"tiny", "xs", "sm", "md", "lg", "xl", "full"

"full"