検索

Greeting

Greeting001

挨拶用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。

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

import { Container, Frame, Grid, Media, Stack, Flow, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Greeting001">
  <Container isWrapper="m" py="50" bgc="base" hasGutter>
    <Stack g="50">
      <Heading level="2" fz="3xl" fw="bold" ff="accent" ta="center">代表からご挨拶</Heading>
      <Grid gtc={['auto', null, '1fr 1fr']} g="50">
        <Frame as="figure" ar={['3/2', null, '3/4']} bdrs="20" bxsh="30">
          <Media src="https://cdn.lism-css.com/random/img?category=ceo" alt="" width="960" height="640" />
        </Frame>
        <Stack g="40" jc="center">
          <Flow fz="l" lh="l">
            <p>デジタルトランスフォーメーションが加速する現代において、 データの活用は企業成長の鍵となります。</p>
            <p>
              私たちは、高度なデータ解析技術とAIを駆使し、データに隠された価値を可視化することで、
              お客様の的確な意思決定と新たなビジネス機会の創出を支援します。
              テクノロジーで、よりスマートで持続可能な社会を実現する。それが私たちのビジョンです。
            </p>
          </Flow>
          <Stack ai="flex-end" g="5" ff="accent">
            <Text fz="l" o="pp">代表取締役社長</Text>
            <Text fz="xl" fw="bold">佐藤 流素</Text>
          </Stack>
        </Stack>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css