Bleed

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>

Usage

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

import { Bleed } from "@/components/ui"

import { Bleed } from "@workspace/ui"

<Bleed />

Align Vertically

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>

Specify Direction

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>

Match Screen Width

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>

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges 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 `margin-block` property.
`blockEnd`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` The CSS `margin-block-end` property.
`blockStart`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` The CSS `margin-block-start` property.
`inline`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` The CSS `margin-inline` property.
`inlineEnd`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` The CSS `margin-inline-end` property.
`inlineStart`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` The CSS `margin-inline-start` property.