Container

Container is a component used as a general division element. By default, it renders the section element.

Import

import { Container } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Container>
  <Heading size="xl"> "Dragon Ball" (DRAGON BALL) </Heading>

  <Text>
    "Dragon Ball" (DRAGON BALL) is a Japanese manga work by Akira Toriyama. It
    was serialized in "Weekly Shonen Jump" (Shueisha) from the 51st issue of
    1984 to the 25th issue of 1995. It is a long manga that depicts "adventure",
    "dream", "battle", "friendship", etc., centered on the protagonist, Son
    Goku, and the treasure, Dragon Ball, which can grant any wish if all seven
    scattered balls are collected.
  </Text>
</Container>

Copied!

Centering Child Elements

Editable example

<Container centerContent>
  <Image
    src="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
    maxW="sm"
  />

  <Heading size="xl"> "Dragon Ball" (DRAGON BALL) </Heading>

  <Text>
    "Dragon Ball" (DRAGON BALL) is a Japanese manga work by Akira Toriyama. It
    was serialized in "Weekly Shonen Jump" (Shueisha) from the 51st issue of
    1984 to the 25th issue of 1995. It is a long manga that depicts "adventure",
    "dream", "battle", "friendship", etc., centered on the protagonist Goku (Son
    Goku), and the treasure "Dragon Ball" that can grant any wish if all seven
    balls scattered around the world are collected.
  </Text>
</Container>

Copied!

Edit this page on GitHub

PreviousStack NextFlex