Skip to content

Latest commit

 

History

History
77 lines (54 loc) · 2.29 KB

AspectRatio.mdx

File metadata and controls

77 lines (54 loc) · 2.29 KB

import { Story, ArgsTable, Canvas } from '@storybook/blocks'; import * as AspectRatioStories from './AspectRatio.stories'; import { Grid, Row, Column } from '../Grid'; import { AspectRatio } from '.';

AspectRatio

Source code  |  Usage guidelines

{/*

*/}

Table of Contents

{/* */}

Overview

The AspectRatio component supports rendering your content in a specific aspect ratio through the ratio prop. This prop will specify the proportion between the width and the height of your content. The width will be determined by spanning 100% of the space available in your layout, and the height will be determined by the ratio that you specified.

To see the full list of ratios supported by the ratio prop, check out the prop table in the Component API section below.

Component API

AspectRatio as

You can use the as prop to support rendering the outermost node in the component with a specific tag, or custom component, as opposed to the default <div> that is used.

For example, to render an article you could use as="article":

<AspectRatio as="article" ratio="4x3">
  Your content
</AspectRatio>

You can also provide custom components, for example:

function Article({ children, ...rest }) {
  return <article {...rest}>{children}</article>;
}

<AspectRatio as={Article} ratio="4x3">
  Your content
</AspectRatio>;

AspectRatio className

The className prop passed into AspectRatio will be forwarded to the outermost node in the component.

Feedback

Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.