Components Containers

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Containers

Containers ensure that your content does not exceed the set max-width horizontally.
Sizes
Max width "full" - (100%)
Max width "xl" - (85rem)
Max width "lg" - (32rem)
Max width "md" - (28rem)
Max width "sm" - (24rem)
heex 
          <.container max_width="full">
  Content
</.container>
Properties
elixir 
          attr(:max_width, :string,
  default: "lg",
  values: ["sm", "md", "lg", "xl", "full"],
  doc: "sets container max-width"
)

attr(:class, :string, default: "", doc: "CSS class for container")
attr(:no_padding_on_mobile, :boolean, default: false, doc: "specify for padding on mobile")
attr(:rest, :global)
slot(:inner_block, required: false)