Posts
Posts03
お知らせ用のパターンです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Box, Stack, Container, Frame, Grid, Media, Flex, Layer, Center, Columns, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---
<DemoLayout title="Posts03">
<Container isWrapper="l" py="50" hasGutter>
<Grid gtc={['1fr', 'auto 1fr']} g="40">
<Flex gr={['1', '1 / 2']} gc={['1', '1 / 2']} ai="fe" jc="fs">
<Heading level="2" fz="2xl" fw="bold">ニュース</Heading>
</Flex>
<Columns cols={['1', '2', '4']} gr="2" gc={['1', '1 / 3']} g="30">
<Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
<Frame as="figure" ar="og" pos="relative" bdrs="10">
<Media
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=max&w=1920&q=80"
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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="20" py="20">
<Flex ai="center" g="20">
<Flex g="15">
<Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">NEWS</Box>
</Flex>
<Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
</Flex>
<Text class="u--trim" fz="m">年末年始休業のお知らせ（2025/12/28〜2026/1/4）</Text>
</Stack>
</Grid>
<Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
<Frame as="figure" ar="og" pos="relative" bdrs="10">
<Media src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=max&w=1920&q=80" 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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="20" py="20">
<Flex ai="center" g="20">
<Flex g="15">
<Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">AWARDS</Box>
</Flex>
<Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
</Flex>
<Text class="u--trim" fz="m">当社制作の「〇〇」が、国際的デザインアワード「ABC Design Award」を受賞しました</Text>
</Stack>
</Grid>
<Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
<Frame as="figure" ar="og" pos="relative" bdrs="10">
<Media
src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?auto=format&fit=max&w=1920&q=80"
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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="20" py="20">
<Flex ai="center" g="20">
<Flex g="15">
<Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">MEDIA</Box>
</Flex>
<Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
</Flex>
<Text class="u--trim" fz="m">デザイン専門誌「Design Today」11月号に、弊社代表のインタビューが掲載されました</Text>
</Stack>
</Grid>
<Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
<Frame as="figure" ar="og" pos="relative" bdrs="10">
<Media src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=max&w=1920&q=80" 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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="20" py="20">
<Flex ai="center" g="20">
<Flex g="15">
<Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">COLUMN</Box>
</Flex>
<Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
</Flex>
<Text class="u--trim" fz="m">デザインコラムを更新しました「ブランディングにおけるロゴデザインの役割」</Text>
</Stack>
</Grid>
</Columns>
<Flex gr={['3', '1 / 2']} gc={['1', '2 / 3']} ai="fe" jc="fe">
<Button href="#" variant="outline" jc="center" w={['stretch', 'auto']} min-w="8rem" fz="s" p="15" bdrs="10">View All</Button>
</Flex>
</Grid>
</Container>
</DemoLayout>