Navigation
Navigation007
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Grid, Media, HTML, Flex, Icon, Layer, LinkBox } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Navigation007">
<Container isWrapper="l" py="50">
<Stack g="40">
<Stack ai="center" g="20" setGutter>
<HTML.h lv="2" class="u--trim" fz="2xl" fw="bold">素敵な旅がここに</HTML.h>
<HTML.p class="u--trim" as="span" fz="s" o="-20">Good experience</HTML.p>
</Stack>
<Grid layout="fluidCols" cols="22rem">
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=1"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">こだわりの贅沢</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">LUXURY TRAVEL</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=2"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">自然と遊ぶ冒険</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">ADVENTURE TRAVEL</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=3"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">文化に触れる</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">CULTURAL TOURS</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=4"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">家族で楽しむ</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">FAMILY TRIPS</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=5"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">気ままにひとりで</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">SOLO TRAVEL</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
<LinkBox layout="frame" href="#" pos="rel" ar="4/3" bxsh="30" setHov>
<Media
isLayer
src="https://cdn.lism-css.com/img/random-2510?category=v&r=6"
alt=""
width="960"
height="640"
setTransition
hov="to:zoom"
/>
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="rel" h="100%" jc="fe" c="white" p="30" g="20" my-s="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<HTML.p class="u--trim" fz="l" fw="bold" lh="s">心ととのえる</HTML.p>
<HTML.p class="u--trim" fz="s" lh="s" o="-10">WELLNESS RETREATS</HTML.p>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" setTransition hov="to:reverse">
<Icon icon="arrow-right" fz="s" />
</Flex>
</Grid>
</Stack>
</LinkBox>
</Grid>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:to\:zoom {
scale: var(--_isHov, 1.1);
}
.-hov\:to\:reverse {
background-color: var(--_isHov, var(--white));
color: var(--_isHov, var(--black));
}
}
</style> style.css