Bleed is a component used to extend elements beyond the boundaries of a container.
199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。
それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。
しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。
ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。
北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。
<Card.Root maxW="full">
<Card.Header>
<Heading size="lg">北斗の拳</Heading>
</Card.Header>
<Card.Body>
<Bleed inline="md">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
w="full"
/>
</Bleed>
<Text>
199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。
</Text>
<Text>
それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。
</Text>
<Text>
しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。
</Text>
<Text>
ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。
</Text>
<Text>
北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。
</Text>
</Card.Body>
<Card.Footer>
<Button>Wikipedia</Button>
</Card.Footer>
</Card.Root>
import { Bleed } from "@yamada-ui/react"
import { Bleed } from "@/components/ui"
import { Bleed } from "@workspace/ui"
<Bleed />
To align vertically, use the block property.
<Box p="lg" rounded="l2" borderWidth="1px">
<Bleed block="lg">
<Center maxH="2xs" overflow="hidden">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
objectFit="cover"
objectPosition="center"
w="100%"
/>
</Center>
</Bleed>
</Box>
To align in a specific direction, use properties like inlineStart or blockEnd.
<VStack>
<Box p="lg" rounded="l2" borderWidth="1px">
<Bleed inlineStart="lg">
<Center h="4xs" overflow="hidden">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
objectFit="cover"
objectPosition="center"
w="100%"
/>
</Center>
</Bleed>
</Box>
<Box p="lg" rounded="l2" borderWidth="1px">
<Bleed inlineEnd="lg">
<Center h="4xs" overflow="hidden">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
objectFit="cover"
objectPosition="center"
w="100%"
/>
</Center>
</Bleed>
</Box>
<Box p="lg" rounded="l2" borderWidth="1px">
<Bleed blockStart="lg">
<Center h="4xs" overflow="hidden">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
objectFit="cover"
objectPosition="center"
w="100%"
/>
</Center>
</Bleed>
</Box>
<Box p="lg" rounded="l2" borderWidth="1px">
<Bleed blockEnd="lg">
<Center h="4xs" overflow="hidden">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
objectFit="cover"
objectPosition="center"
w="100%"
/>
</Center>
</Bleed>
</Box>
</VStack>
To match the screen width, set inline to full.
<Center w="full">
<VStack gap="lg" maxW="full">
<Bleed blockStart="lg" inline="full">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg"
alt="北斗の拳"
maxH="xs"
objectFit="cover"
w="full"
/>
</Bleed>
<Heading alignSelf="center">
<Image
src="https://hokuto-no-ken.jp/wp/wp-content/uploads/2017/03/title_hokuto.png"
alt="北斗の拳"
maxW="xs"
/>
</Heading>
<VStack>
<Text>
199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。
</Text>
<Text>
それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。
</Text>
<Text>
しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。
</Text>
<Text>
ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。
</Text>
<Text>
北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。
</Text>
</VStack>
</VStack>
</Center>
Box is the most abstract component on which all other components are built. By default, it renders a div element.
Center is a component that aligns the child elements in the center within the component.
Container is a component used as a general division element. By default, it renders the section element.
Flex is a component that sets flex to Box. Also, convenient style shorthand is available.
Float is a component used to fix elements to the edges of a container.
Grid is a component for managing grid layouts. It also comes with handy style shorthand.
Group is a component that groups and attaches multiple elements together.
HStack is used to stack child elements horizontally.
| Prop | Default | Type / Description |
|---|---|---|
as | - | AsThe HTML element to render. |
asChild | - | booleanMerges its props onto its immediate child. |
css | - | CSSObject | CSSObject[]The CSS object. |
colorScheme | - | "amber" | "black" | "blackAlpha" | "blue" | "cyan" | "danger" | "emerald" | "error" | "flashy" | "fuchsia" ...Set color scheme variables. |
block | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |
blockEnd | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |
blockStart | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |
inline | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |
inlineEnd | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |
inlineStart | - | "-0.5" | "-1.5" | "-1" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" ...The CSS |