Banner

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

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で画像に被せてコンテンツを表示

リサイズ可能

<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' pos='rel' g='20' p='30' c='#fff' bgc='rgb(0 0 0 / 50%)' min-h='30cqw'>
    <Stack g='10'>
      <HTML.p fz='xl' fw='bold'>Banner</HTML.p>
      <Dummy fz='s' lh='s' lang='ja' length='s'/>
    </Stack>
    <Icon fz='3xl' viewBox="0 0 256 256">
      <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>

<a class='l--frame is--linkBox set-transition -hov:o -bdrs:20' href='#banner-link'>
  <img class='a--media is--layer' src='https://picsum.photos/seed/hogeee/1200/400' width='960' height='640' loading='lazy' />
  <div class='l--flex -jc:between -ai:center -pos:rel -g:20 -p:30 -c -bgc -min-h' style='--c:#fff;--bgc:rgb(0 0 0 / 50%);--min-h:30cqw'>
    <div class='l--stack -g:10'>
      <p class='-fz:xl -fw:bold'>Banner</p>
      <p class='-fz:s -lh:s'>
        ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
      </p>
    </div><svg class='a--icon -fz:3xl' viewBox='0 0 256 256' width='1em' height='1em' aria-hidden='true'
      ><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></svg
    >
  </div>
</a>