Lism CSS
Search

Greeting

Greeting001

A greeting template. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.

大きい画面で見る
↓
Code
en.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">Message from Our CEO</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>In today's world of accelerating digital transformation, data utilization is the key to corporate growth.</p>
            <p>
              We leverage advanced data analytics and AI to visualize the hidden value in data, supporting our clients in making informed decisions
              and creating new business opportunities. Realizing a smarter, more sustainable society through technology. That is our vision.
            </p>
          </Flow>
          <Stack ai="flex-end" g="5" ff="accent">
            <Text fz="l" o="pp">CEO</Text>
            <Text fz="xl" fw="bold">Ryuso Sato</Text>
          </Stack>
        </Stack>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css