Frame
Frame is a simple layout utility for rendering and positioning its content.

Usage

Frame should is primarily used for adding simple layout styles for the content. It works great in cases where you need to compose components content manually and can be used with other layout utilities like Stack. For instance, if you're using a Card component without padding, you can then use Frame to set the padding you need. This lets you add full-width images to the Card but still keep the content padded.

Frame uses the padding value you pass as a multiplier for the unit design tokens. This means that with the default theme, padding={4} would resolve to 16px padding.

Card content

Frame supports different types of the content alignment, including text alignment. Its display gets switched to flex when used with align and/or justify properties.

Colors

Frame border and background colors can be defined using our color token values:

Positive frame

Layout

Border radius of the frame support radius design tokens as well. Since border radius crops the children elements, you might also want to use overflow="hidden" to the Frame.

Primary frame

You can define Frame's height and width by passing any css value to them. This includes passing values like 100% or var(--arcade-unit-x10) etc.

Primary frame

Accessibility

You can use as property to render Frame as a custom HTML tag.

Properties

NameTypeDefaultRequiredComment
paddingnumber-false
alignstart, center, end-false
justifystart, center, end-false
textAlignstart, center, end-false
backgroundColorneutral-faded, critical-faded, positive-faded, primary-faded, page-faded-false
borderColorneutral, neutral-faded, positive, critical, primary-false
borderRadiussmall, medium, large-false
widthstring, number-false
heightstring, number-false
overflowhidden-false
asstringdivfalse
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element