Container

For a simple responsive content wrapper.

Prototype

Slot name: content

Your content goes here

Description

Container is a basic wrapper you can use to confine groups of content into spaces according to the Design system container tokens.

Properties

Name	Description	Type	Default
`size`	Specify the size of the container. This is used as a maximum width according to the system container sizes but will flex to fill the space available on smaller screens.	`["tiny", "xs", "sm", "md", "lg", "xl", "full"]`	`"full"`

Container Sizes

The primary property on the SageContainer is the size property, which configures the maximum width of the container.

Size: `tiny`

Slot name: content

tiny container

<%= sage_layout SageContainer, { size: "tiny" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`tiny` container"
  %>
<% end %>

Size: `xs`

Slot name: content

xs container

<%= sage_layout SageContainer, { size: "xs" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`xs` container"
  %>
<% end %>

Size: `sm`

Slot name: content

sm container

<%= sage_layout SageContainer, { size: "sm" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`sm` container"
  %>
<% end %>

Size: `md`

Slot name: content

md container

<%= sage_layout SageContainer, { size: "md" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`md` container"
  %>
<% end %>

Size: `lg`

Slot name: content

lg container

<%= sage_layout SageContainer, { size: "lg" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`lg` container"
  %>
<% end %>

Size: `xl`

Slot name: content

xl container

<%= sage_layout SageContainer, { size: "xl" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`xl` container"
  %>
<% end %>

Size: `full`

Slot name: content

full container

<%= sage_layout SageContainer, { size: "full" } do %>
  <%= render "examples/shared/slot_placeholder",
    name: "content",
    description: "`full` container"
  %>
<% end %>