Banner

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

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

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

Examples

↓

Preview

<BoxLink layout="frame" href="#banner-link" hov="-o" hasTransition bdrs="20">
  <img src="https://picsum.photos/seed/hogeee/1200/400" alt="" width="800" height="200" />
</BoxLink>

↓

Layerで画像に被せてコンテンツを表示

Banner

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ

<BoxLink layout="frame" href="#banner-link" hov="-o" hasTransition 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="relative" g="20" p="30" c="#fff" bgc="rgb(0 0 0 / 50%)" min-h="30cqw">
    <Stack g="10">
      <Text fz="xl" fw="bold">
        Banner
      </Text>
      <p class="-fz:s -lh:s">ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
    </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>
</BoxLink>

<a class="l--frame is--boxLink has--transition -hov:-o -bdrs:20" href="#banner-link">
  <img class="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:relative -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>