Lism CSS
Search

Information

Information002

An information template. All content is placeholder text.

大きい画面で見る
↓
Code
en.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Information002">
  <Container isWrapper="l" bgc="base" py="50" hasGutter>
    <Stack g="20" ai="center" mb="40">
      <h2 class="u--trim">Company Information</h2>
      <Text class="u--trim" fz="s" ta="center" o="ppp">About Us</Text>
    </Stack>
    <Stack g="30">
      <Text fz="l" fw="bold">Overview</Text>
      <Grid gtc={['auto', null, '1fr 1fr']} g="50 60">
        <Grid as="dl" className="u--divide" gtr="auto" gtc="auto 1fr" cg="50" bd-y>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Company Name</dt>
            <dd>Rhythm Inc.</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Founded</dt>
            <dd>January 1, 2020</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Location</dt>
            <dd>10000 Marunouchi, Chiyoda-ku, Tokyo</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Representative</dt>
            <dd>Taro Tanaka</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Business</dt>
            <dd>Software Development, System Integration, IT Consulting</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Capital</dt>
            <dd>100 million yen</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Employees</dt>
            <dd>100</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Banks</dt>
            <dd>MUFG Bank, Mizuho Bank</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>Major Clients</dt>
            <dd>ABC Corp., XYZ Inc., 123 Co., Ltd.</dd>
          </Grid>
        </Grid>
        <Frame>
          <Media src="https://cdn.lism-css.com/random/img?category=building" alt="" width="960" height="640" />
        </Frame>
      </Grid>
    </Stack>
    <Stack g="30" my-s="50">
      <Text fz="l" fw="bold">History</Text>
      <Grid gtc={['auto', null, '1fr 1fr']} g="50 60">
        <Grid as="dl" className="u--divide" gtr="auto" gtc="auto 1fr" cg="50" bd-y>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>2020</dt>
            <dd>Rhythm Inc. established</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>2021</dt>
            <dd>Released the first in-house product</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>2022</dt>
            <dd>Office relocation due to business expansion</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>2023</dt>
            <dd>Launched AI solutions as a new business</dd>
          </Grid>
          <Grid gtc="subgrid" gc="1/-1" p="20">
            <dt>2024</dt>
            <dd>Started global expansion</dd>
          </Grid>
        </Grid>
        <Frame>
          <Media src="https://cdn.lism-css.com/random/img?category=people" alt="" width="960" height="640" />
        </Frame>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css