Posts
Posts04
A portfolio/works pattern. Items have a minimum width set, and the number of columns changes according to the container width.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, AutoColumns, Grid, Media, Flex, Layer, Center, Cluster, Text, Inline, Heading, Link } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---
<DemoLayout title="Posts04">
<Container isWrapper="l" py="50" bgc="base-2" hasGutter>
<Stack g="40">
<Stack ai="center" g="30">
<Heading level="2" class="u--trim" fz="4xl" fw="light" lts="l">Works</Heading>
<Text class="u--trim" fz="m" o="pp" lts="l">Our Works</Text>
</Stack>
<Cluster g="15">
<Button href="####" px="20" py="10" bdrs="99">All</Button>
<Button href="####" bgc="base" c="text" px="20" py="10" bdrs="99">Web</Button>
<Button href="####" bgc="base" c="text" px="20" py="10" bdrs="99">Design</Button>
<Button href="####" bgc="base" c="text" px="20" py="10" bdrs="99">Video</Button>
<Button href="####" bgc="base" c="text" px="20" py="10" bdrs="99">Branding</Button>
<Button href="####" bgc="base" c="text" px="20" py="10" bdrs="99">Music</Button>
</Cluster>
<AutoColumns cols="20rem" g="25">
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media
src="https://images.unsplash.com/photo-1615406020658-6c4b805f1f30?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Website for an Architecture Firm</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Web</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Design</Button>
</Cluster>
</Grid>
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media
src="https://images.unsplash.com/photo-1689037676470-b72230d5236e?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Branding for a Bakery Café</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Ito Yui</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Kobayashi Ren</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Branding</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Design</Button>
</Cluster>
</Grid>
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media
src="https://images.unsplash.com/photo-1597696929736-6d13bed8e6a8?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Logo and Packaging for a Ceramics Brand</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Ito Yui</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Yamada Aoi</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Branding</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Design</Button>
</Cluster>
</Grid>
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Recruitment Site for a Tech Company</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Nakamura Sho</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Web</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Design</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Video</Button>
</Cluster>
</Grid>
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media
src="https://images.unsplash.com/photo-1499364615650-ec38552f4f34?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Music Video for a Band</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Kobayashi Ren</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Video</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Music</Button>
</Cluster>
</Grid>
<Grid isBoxLink gtr="subgrid" gr="span 4" g="30" bgc="base" bdrs="30" p="15" ai="start" set="hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="16/9" pos="relative" bdrs="20">
<Media
src="https://images.unsplash.com/photo-1610641818989-c2051b5e2cfd?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Text class="u--trim" fz="m" fw="bold"><Link isCoverLink href="#">Concept Film for a Resort Hotel</Link></Text>
<Stack class="u--trimAll" as="dl" g="10" fz="s" o="pp">
<Flex g="5"><dt>Director:</dt><dd>Nakamura Sho</dd></Flex>
<Flex g="5"><dt>Designer:</dt><dd>Yamada Aoi</dd></Flex>
</Stack>
<Cluster g="15">
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Video</Button>
<Button href="####" bgc="base-2" c="text" fz="s" px="15" py="5" bdrs="99">Branding</Button>
</Cluster>
</Grid>
</AutoColumns>
</Stack>
</Container>
</DemoLayout>