コンテンツにスキップ
Lism CSS

Banner

バナーリンクを表示するためのLismの使用例を紹介します。

Examples

Section titled “Examples”
↓
Preview
<LinkBox layout='frame' href='#banner-link' hov='o' setTransition bdrs='20'>
  <img src='https://picsum.photos/seed/hogeee/1200/400' alt='' width='800' height='200' />
</LinkBox>
↓
Layerで画像に被せてコンテンツを表示

Banner

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

リサイズ可能 
<LinkBox layout='frame' href='#banner-link' hov='o' setTransition bdrs='20'>
  <Media isLayer src='https://picsum.photos/seed/hogeee/1200/400' alt='' width='960' height='640' loading='lazy' />
  <Flex jc='between' ai='center' g='30' p='30' c='#fff' bgc='rgb(0 0 0 / 50%)' pos='rel' min-h='25cqw'>
    <Stack g='5' lh='s'>
      <HTML.p fz='xl' fw='bold'>Banner</HTML.p>
      <Dummy fz='s' lang='ja' length='s'/>
    </Stack>
    <Icon fz='2xl' viewBox="0 0 256 256" scale='1.2'>
      <path d="M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z"></path>
    </Icon>
  </Flex>
</LinkBox>