Bleed

Make content bleed through any container.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, necessitatibus provident possimus quidem voluptatum accusamus fuga, alias libero eligendi laboriosam numquam aperiam sint quis iusto excepturi at iste, a quas.

BLEEDING CONTENT

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quia officiis distinctio earum neque assumenda odit voluptatibus quos dolores tempore molestiae maxime, impedit voluptate veritatis deserunt. Cum cumque reiciendis a.

View source

Anatomy

import { Bleed } from "@lualtek/react-components";
 
export default () => {
  return (
    <Container dimension="medium">
      ...
      <Bleed amount={32}>Bleeding Content</Bleed>
      ...
    </Container>
  );
};

API Reference

export type BleedProps = {
  /**
   * Sets the amount of bleed on each inline side.
   */
  amount?: string | TokensTypes["space"];
 
  /**
   * Make the content bleed to the edges of the viewport.
   * @importatnt This will ignore the `amount` prop.
   */
  full?: boolean;
};

Aspect Ratio Card