General
General04
A section pattern. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Media, Stack, Columns } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---
<DemoLayout title="General04">
<Container bgc="base">
<Columns cols={['1', null, '2']} g="5">
<Stack g="40" ai="center" jc="center" py="60" px={['30', '50']}>
<h2>Three Days to Experience the Future</h2>
<Stack g="30">
<p>
Hands-on exhibits of the latest robotics, AI, and VR, plus sessions led by leading researchers. This is a conference where you can see,
touch, and experience the future of technology and people.
</p>
<p>Over three days, we will host more than 40 sessions and over 100 exhibitors. Register in advance and join us free of charge.</p>
</Stack>
<Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
</Stack>
<Columns cols="2" g="5">
<Frame as="figure">
<Media src="https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
</Frame>
<Frame as="figure">
<Media src="https://images.unsplash.com/photo-1786542715448-f47cf2dbcca0?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
</Frame>
<Frame as="figure">
<Media src="https://images.unsplash.com/photo-1554474051-0256b98c36f8?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
</Frame>
<Frame as="figure">
<Media src="https://images.unsplash.com/photo-1550305080-4e029753abcf?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
</Frame>
</Columns>
</Columns>
</Container>
</DemoLayout>