Posts
Posts02
お知らせ用のパターンです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。
index.astro
---
import { CaretRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Grid, AutoColumns, Flex, Icon, Stack, Text, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---
<DemoLayout title="Posts02">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Grid gtr={['auto', null, 'auto auto 1fr']} gtc={['auto', null, 'auto 1fr']} g="30">
<Stack gr="1" gc="1" g="20" min-w={['auto', null, '12rem']}>
<Text class="u--trim" fz="2xl" fw="light" lts="l">News</Text>
<Heading level="2" class="u--trim" fz="xs" o="pp">お知らせ</Heading>
</Stack>
<AutoColumns cols="22rem" gr={['2', null, '1 / -1']} gc={['1', null, '2']} g="30">
<Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
<Grid gtc="1fr auto" g="20" jc="start" ai="center">
<Text fz="s">2025.10.30</Text>
<Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">COLUMN</Text>
</Grid>
<Flex c="text" g="25">
<Stack class="u--trimAll" g="30">
<Text hasTransition hov="in:cLink">デザインコラム更新「UIデザインにおけるアクセシビリティの重要性」</Text>
<Text fz="s" o="pp"
>デザインコラムを更新しました。「Webアクセシビリティ」の基本的な考え方と、 今日から実践できるポイントについて解説します。</Text
>
</Stack>
<Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
</Flex>
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
<Grid gtc="1fr auto" g="20" jc="start" ai="center">
<Text fz="s">2025.10.30</Text>
<Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">EVENT</Text>
</Grid>
<Flex c="text" g="25">
<Stack class="u--trimAll" g="30">
<Text hasTransition hov="in:cLink">「LOOS DESIGN CONFERENCE 2025」登壇のお知らせ</Text>
<Text fz="s" o="pp"
>2025年12月5日（金）に開催される国内最大級のデザインカンファレンスに、弊社アートディレクターの〇〇が登壇。「デザインがビジネスにもたらす価値」についてお話しします。</Text
>
</Stack>
<Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
</Flex>
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
<Grid gtc="1fr auto" g="20" jc="start" ai="center">
<Text fz="s">2025.10.30</Text>
<Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">RELEASE</Text>
</Grid>
<Flex c="text" g="25">
<Stack class="u--trimAll" g="30">
<Text hasTransition hov="in:cLink">新サービス「スタートアップ向けブランディング支援パッケージ」提供開始</Text>
<Text fz="s" o="pp"
>スタートアップ企業様を対象としたスピーディーかつ高品質なブランディング支援パッケージの提供を開始しました。
ロゴ、Webサイト、名刺までをワンストップでご提供します。</Text
>
</Stack>
<Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
</Flex>
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
<Grid gtc="1fr auto" g="20" jc="start" ai="center">
<Text fz="s">2025.10.30</Text>
<Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">NEWS</Text>
</Grid>
<Flex c="text" g="25">
<Stack class="u--trimAll" g="30">
<Text hasTransition hov="in:cLink">オフィス移転および電話番号変更のお知らせ</Text>
<Text fz="s" o="pp"
>業務拡大に伴いオフィスを下記住所へ移転いたしました。
社員一同より一層の努力を重ねてまいります。今後とも変わらぬご愛顧を賜りますようお願い申し上げます。</Text
>
</Stack>
<Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
</Flex>
</Flex>
</Grid>
</AutoColumns>
<Flex gr={['3', null, '2']} gc="1">
<Button href="#" jc="center" w={['stretch', null, 'auto']} min-w="8rem" fz="s" p="15" bdrs="99">View All</Button>
</Flex>
</Grid>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:reverse {
background-color: var(--_isHov, var(--black));
color: var(--_isHov, var(--white));
}
.-hov\:in\:cLink {
color: var(--_isHov, var(--link));
}
}
</style>