Lism CSS
検索

Feature

Feature012

特徴・注目コンテンツ用のテンプレートです。breakpoint「md」以下は2カラム、「sm」以下は1カラムで表示されます。

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

import { Stack, Container, Frame, Columns, Grid, Media, Flex, Layer, Center, Text, Inline } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Feature012">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="40">
      <Flex ai="baseline" g="0 30" fxw="wrap">
        <h2>カテゴリーから探す</h2>
        <Inline fz="m" fw="bold" o="pp">Categories</Inline>
      </Flex>
      <Columns cols={[1, 2, 3]} g="40" cg="40">
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>KITCHEN</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">キッチン</Text>
            <Text class="u--trim" fz="s">毎日の料理を心躍る体験に。キッチンを美しく彩る、ミニマルなデザインの調理家電。</Text>
          </Stack>
        </Grid>
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>LIVING & AIR</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">空調・生活家電</Text>
            <Text class="u--trim" fz="s">空間に溶け込み、心地よい空気と時間を作り出す。日々の暮らしの質を高めるアイテム。</Text>
          </Stack>
        </Grid>
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>CLEANING</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">掃除機</Text>
            <Text class="u--trim" fz="s">掃除さえも、美しい時間に変える。パワフルな吸引力と、オブジェのような佇まい。</Text>
          </Stack>
        </Grid>
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>LAUNDRY</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">洗濯機・衣類ケア</Text>
            <Text class="u--trim" fz="s">大切な衣類を、優しく、美しく。静かでクリーンなデザインが、空間を洗練させます。</Text>
          </Stack>
        </Grid>
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=5" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>AUDIO</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">オーディオ</Text>
            <Text class="u--trim" fz="s">心を揺さぶる、クリアで立体的なサウンド。音楽をアートのように空間に飾るオーディオ。</Text>
          </Stack>
        </Grid>
        <Grid g="30" as="a" isBoxLink href="#" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="20" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=6" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
            <Flex pos="absolute" t="0" l="0" lh="1" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
              <Inline>LIGHTING</Inline>
            </Flex>
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="l" fw="bold">照明</Text>
            <Text class="u--trim" fz="s">光と影を操り、空間をドラマチックに演出。シーンに合わせて、心地よい光をデザイン。</Text>
          </Stack>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>
style.css