@bedrock-layout/frame

bedrock-layout frame

Usage no npm install needed!

<script type="module">
  import bedrockLayoutFrame from 'https://cdn.skypack.dev/@bedrock-layout/frame';
</script>

README

@bedrock-layout/frame

Frame is a layout helper that frames the content into the desired aspect ratio.

Full docs at: bedrock-layout.dev

When to Use

Use Frame component when you want to crop on-screen content like media into any desired aspect ratio.

How to install

npm install @bedrock-layout/frame

or

yarn add @bedrock-layout/frame

Usage

import { Frame } from '@bedrock-layout/frame';

<Frame>
  <img src='...' />
</Frame>;

data-attribute

For styling purposes, you can select data-bedrock-frame.

API

∏ | Property | Description | Type | Default | | :------: | :---------------------------------------------------------------------------------------------------------------------------: | :---------------: | :-------------------: | ----------------- | | ratio | Aspect ratio that you want the child element to maintain | [number, number] | ${number}/${number} | medium breakpoint | | position | Alignment of the child element. Use object-position value | string | 50% |