Testimonials
Testimonials002
お客様の声用のテンプレートです。breakpoint毎にアイテムの幅が変更されます。またアイテムをスナップした際に特定の位置で止まります。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Grid, Media, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Testimonials002">
<Container bgc="gray:5%" py="50">
<Stack g="40">
<HTML.h lv="2" class="u--trim" fz="2xl" fw="bold" ta="center">お客様の声</HTML.h>
<Grid
class="u--snap"
g="30"
p="30"
bdrs="20"
ov="auto"
gaf="column"
gac="var(--cols)"
cols={['90%', '60%', 'min(35%, 24rem)']}
tabIndex="0"
style={{ 'scroll-padding': 'var(--p)', '--snapAlign': 'center' }}
>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=1" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">自由な時間が増えた</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">30代 / 会社員</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
仕事から帰ると部屋がきれいになっているのが嬉しいです。面倒な掃除から解放されて、平日の夜にゆとりができました。
</HTML.p>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=2" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">まるでもう一人の自分</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">40代 / 主婦</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
材料を入れてボタンを押すだけで本格的な煮込み料理が完成。 火を使わないので、子供から目を離さずに調理できて安心です。
</HTML.p>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=3'" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">気づいた時にすぐ！</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">20代 / 大学生</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
気づいた時にサッと掃除できる手軽さが最高です。 コードレスなので、車の中の掃除にも使えて本当に便利だと思います。
</HTML.p>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=4" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">食後の時間にゆとりを</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">30代 / パート</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
毎日の食器洗いの手間がなくなり、食後に家族とゆっくり過ごせる時間が増えました。 手洗いよりきれいに洗える気がします。
</HTML.p>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=5" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">ヘルシーなのに本格的</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">40代 / 会社員</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
油を使わずに揚げ物ができるので、ヘルシーで後片付けも楽ちんです。 外はサクサク、中はジューシーで味も本格的です。
</HTML.p>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
<Grid gtc="auto 1fr" ai="center" g="20">
<Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
<Media src="https://cdn.lism-css.com/img/random-2510?r=6" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20">
<HTML.p class="u--trim" fz="m" fw="bold">暮らしの良き相棒</HTML.p>
<HTML.p class="u--trim" fz="s" o="-20">20代 / ITエンジニア</HTML.p>
</Stack>
</Grid>
<HTML.p class="u--trim" fz="m" o="-10">
声だけで音楽をかけたり天気を調べたりできるのが未来的。 朝の忙しい時間に、ニュースを聞きながら準備できるのがお気に入り。
</HTML.p>
</Grid>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css