Banner

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

Examples of banner link layouts built with 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>

↓

Overlaying content on an image with Layer

Banner

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Resize

<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>
      <DummyText fz="s" lh="s" 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>
</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">Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</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>