Lism CSS
Search

Frame

l--frame is a layout module that displays the direct child media element (img, video, iframe) scaled to fit its own size.

↓
CSS

Available Components

A <Frame> component is distributed in lism-css.

Import

import { Frame } from 'lism-css/react';

Props

PropertyDescription
arSpecifies the aspect ratio of the frame.

(ar itself is a general-purpose CSS Prop that can be specified on any component.)

Usage

↓
Specifying ar='16/9'
リサイズ可能 
<Frame ar='16/9'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
</Frame>
↓
Using figure and figcaption
Lorem ipsum text.
リサイズ可能 
<Frame as='figure' ar='16/9' pos='rel'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Flex as='figcaption' pos='abs' z='1' b='0' w='100%' jc='center' p='10' c='white' bgc='rgb(0 0 0 / 40%)'>Lorem ipsum text.</Flex>
</Frame>
↓
Using video
リサイズ可能 
<Frame ar='16/9'>
  <video controls>
    <source src="/video/video-1.mp4" type="video/mp4" />
  </video>
</Frame>
↓
Using iframe
リサイズ可能 
<Frame ar='16/9'>
  <iframe src="https://www.youtube.com/embed/gcgKUcJKxIs?si=uDa6akiLY3QmM8pK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</Frame>
↓
Using Layer components

Heading

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能 
<Frame ar='3/2' pos='rel' c='#fff'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Layer blur='4px' bgc='rgb(0 0 0 / 40%)' />
  <Layer p='30' ov='auto'>
    <Center min-h='100%' g='15'>
      <h2>Heading</h2>
      <Dummy max-w="xs" />
    </Center>
  </Layer>
</Frame>

ar can be used on any component

About values available for ar

ar (the CSS Prop for aspect-ratio) is a general-purpose property that can be specified on any component. See here for the available values.

↓
Example of specifying ar on Flow

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能 
<Flow ar='16/9' ov-y='auto' p='30'>
  ...
</Flow>
↓
ar can also be changed at breakpoints.
Ratio: 1/1 3/2 16/9
リサイズ可能 
<Frame ar={['1/1', '3/2', '16/9']} pos='rel'>
  ...
</Frame>

© Lism CSS. All rights reserved.

Contents