About
06 - Profile and history tables
A section placing company profile and history definition lists in two columns. Below the "md" breakpoint, it switches to a single column. All content is placeholder text.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Grid, Media, Stack, Text } from 'lism-css/astro';
---
<DemoLayout title="About06">
<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" gtr="auto" gtc="auto 1fr" cg="50" bd-be>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Company Name</dt>
<dd>Rhythm Inc.</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Founded</dt>
<dd>January 1, 2020</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Location</dt>
<dd>10000 Marunouchi, Chiyoda-ku, Tokyo</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Representative</dt>
<dd>Taro Tanaka</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Business</dt>
<dd>Software Development, System Integration, IT Consulting</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Capital</dt>
<dd>100 million yen</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Employees</dt>
<dd>100</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Banks</dt>
<dd>MUFG Bank, Mizuho Bank</dd>
</Grid>
<Grid gtc="subgrid" gc="1/-1" bd-bs p="20">
<dt>Major Clients</dt>
<dd>ABC Corp., XYZ Inc., 123 Co., Ltd.</dd>
</Grid>
</Grid>
<Frame>
<Media
src="https://images.unsplash.com/photo-1512403754473-27835f7b9984?auto=format&fit=max&w=1000&q=80&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
width="1000"
height="1400"
/>
</Frame>
</Grid>
</Stack>
</Container>
</DemoLayout>