Search

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
<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>

© Lism CSS. All rights reserved.