Skip to content
Cloudflare Docs

Width

Width is used 5 times on 3 pages.

Pages which use Width

Used 5 times.

Pages

Partials

This component can be used to constrain the width of content, such as text or images.

Import

import { Width } from "~/components";

Usage

This content will take up 75% of the container width

This content will take up 50% of the container width

This content will take up 25% of the container width

This content will take up 25% of the container width and be centered

 
import { Width } from "~/components";


<Width size="large">This content will take up 75% of the container width</Width>


<Width size="medium">
  This content will take up 50% of the container width
</Width>


<Width size="small">This content will take up 25% of the container width</Width>


<Width size="small" center>
  This content will take up 25% of the container width and be centered
</Width>

<Width> Props

size

required

type: "large" | "medium" | "small"

Controls the width of the container:

  • large: 75% of container width
  • medium: 50% of container width
  • small: 25% of container width

center

type: boolean

Whether to horizontally center the content.