Hero
Hero01
A full-height hero with a header and centered content layered over a background image.
en.astro
---
import { Menu2Icon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Flex, Media, Layer, Icon, Text, Inline, Link, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---
<DemoLayout title="Hero01">
<Fragment slot="head">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
</Fragment>
<!-- header -->
<Container as="header" isWrapper="xl" hasGutter pos="fixed" t="0" w="100%" py="25" t="0" z="99">
<Flex ai="center" jc="between" g="30" c="white">
<Inline lts="l">Lism</Inline>
<Flex ai="center">
<Icon icon={Menu2Icon} weight="light" fz="2xl" label="Open menu" />
</Flex>
</Flex>
</Container>
<!-- Hero -->
<Stack isContainer hasGutter pos="relative" z="0" min-h="100svh" c="white" style={{ '--ff--accent': "'IBM Plex Mono', monospace" }}>
{/* Background image and dark overlay */}
<Frame isLayer>
<Media
isLayer
src="https://cdn.lism-css.com/img/dark/1m6evtRv6FvY.webp"
alt=""
width="960"
height="640"
style={{ scale: 1.1, transformOrigin: 'center 25%', objectPosition: '40% center' }}
/>
<Layer bgc="black:25%" style={{ backdropFilter: 'grayscale(0.5) contrast(0.9) blur(4px)' }} />
<!-- <Media isLayer src="https://cdn.lism-css.com/img/kpwuzP15GeSP.webp" alt="" width="960" height="640" style={{ scale: 1.1, transformOrigin: "75% 25%", objectPosition: '55% 40%' }} />
<Layer bgc="black:30%" style={{ backdropFilter: 'blur(6px)' }} /> -->
</Frame>
<Stack isWrapper="s" fx="1" z="1" ff="accent" py="40" g="35">
<Heading level="1" class="u--trim" fz={['3xl', '4xl']} lts="xl" fw="400" ta="center" tt="uppercase" my="auto">lorem ipsum</Heading>
<Text class="u--trim" fz="s" lh="l" ta="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</Text>
<Flex g="20 30" fxw="wrap" jc="center">
<Button href="#" variant="outline" c="white" px="40" py="10" hl="xs" hasTransition hov={{ bgc: 'base', c: 'text' }}>Button</Button>
</Flex>
</Stack>
</Stack>
</DemoLayout>