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