Lism CSS
検索

Navigation

Navigation006

ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

大きい画面で見る
↓
コード
index.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Grid, AutoColumns, Icon, BoxLink, Stack, Flex, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Navigation006">
  <Container isWrapper="l" bgc="base-2" py="50" hasGutter>
    <Grid gtr={['auto 1fr auto', null, '1fr auto auto 1fr']} gtc={['auto', null, 'minmax(14rem, auto) 1fr']} ai="center" g="40">
      <Stack gr={['1', null, '2']} gc="1" g="20">
        <Text class="u--trim" fz="3xl" fw="bold" ff="accent" c="gray">Navigation</Text>
        <Heading level="2" class="u--trim" fz="s" fw="normal" o="pp">ナビゲーション</Heading>
      </Stack>
      <AutoColumns class="u--trimAll" gr={['2', null, '1 / -1']} gc={['1', null, '2']} cols="14rem" g="30 40">
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>キッチン</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>リビング</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>オーディオ</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>ライティング</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>限定モデル</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>会社概要</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>沿革</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>ニュースリリース</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>メディア掲載</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>IR情報</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>デザイナーインタビュー</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>開発秘話</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>ユーザーの声</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>ブログ</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>イベント情報</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>私たちの働き方</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>募集職種一覧</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>新卒採用</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>キャリア採用</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
        <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
          <Inline>インターンシップ</Inline>
          <Icon icon="caret-right" />
        </BoxLink>
      </AutoColumns>
      <Flex gr={['3', null, '3']} gc={['1', null, '1']} g="15">
        <Button g="15" variant="outline" href="#" w={['stretch', null, 'auto']} bdrs="10" hasTransition hov={{ bgc: 'black', c: 'white' }}>
          <Inline gc="1" fz="s">View More</Inline>
          <Icon icon="arrow-right" gc="2" fz="80%" />
        </Button>
      </Flex>
    </Grid>
  </Container>
</DemoLayout>
style.css