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' hasGutter>
<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold'>素敵な旅がここに</HTML.h>
<HTML.p class='u-trim' tag='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