Container

Usage#

import { Container } from "@backstage/ui";

<Container>Hello World!</Container>

API reference#

Examples#

Simple#

A simple example of how to use the Container component.

<Container>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Container>

Responsive padding & margin#

The Container component also supports responsive values, making it easy to create responsive designs.

<Container paddingY={{ xs: 'sm', md: 'md' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Container>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

• bui-Container

Changelog#

• 0.8.0 - Added support for data attributes in <Box />, <Container />, <Flex />, and <Grid /> components, ensuring they are correctly applied to the rendered elements. #31374
• 0.5.0 - Fixes spacing props on layout components #30013
• 0.3.0 - Update Container styles #29475