Lism CSS
検索

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';
import './_style.css';
---

<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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">こだわりの贅沢</Text>
                <Text class="u--trim" fz="s" lh="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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">自然と遊ぶ冒険</Text>
                <Text class="u--trim" fz="s" lh="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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">文化に触れる</Text>
                <Text class="u--trim" fz="s" lh="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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">家族で楽しむ</Text>
                <Text class="u--trim" fz="s" lh="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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">気ままにひとりで</Text>
                <Text class="u--trim" fz="s" lh="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="var: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" my-s="auto">
            <Grid gtc="1fr auto" ai="end" g="30">
              <Stack g="20">
                <Text class="u--trim" fz="l" fw="bold" lh="s">心ととのえる</Text>
                <Text class="u--trim" fz="s" lh="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>
style.css