Hero
Hero02
A full-height hero with a header, a large heading and a scroll cue at the bottom right.
en.astro
---
import { Menu2Icon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Box, Container, Frame, Flex, Divider, Media, Layer, Icon, Heading, Text, Inline, Link } from 'lism-css/astro';
---
<DemoLayout title="Hero02">
<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=Anton&display=swap" rel="stylesheet" />
</Fragment>
<Container as="header" hasGutter pos="fixed" c="white" t="0" w="100%" z="99" py="20">
<Flex ai="center" jc="between" g="30">
<Inline lts="l">Lism</Inline>
<Flex as="nav" ai="center" g="30" fz="s" d={['none', null, 'flex']}>
<Link href="#" set="plain" hasTransition hov="-o">About</Link>
<Link href="#" set="plain" hasTransition hov="-o">Works</Link>
<Link href="#" set="plain" hasTransition hov="-o">Contact</Link>
</Flex>
<Flex ai="center" d={['flex', null, 'none']}>
<Icon icon={Menu2Icon} weight="light" fz="2xl" label="Open the menu" />
</Flex>
</Flex>
</Container>
<Stack isContainer as="section" class="c--hero02" pos="relative" min-h="100svh" bgc="black" c="white">
<Frame isLayer>
<Media src="https://images.pexels.com/photos/31356866/pexels-photo-31356866.jpeg?w=2400&h=800&auto=format" alt="" width="1200" height="800" />
<Layer bgc="black:25%" />
</Frame>
<Stack hasGutter fz="2xl" my="auto" z="1" style={{ '--ff--accent': 'Anton, sans-serif' }}>
<Heading level="1" ff="accent" fz="clamp(var(--fz--3xl), 10vw, var(--fz--5xl))" fw="800" lh="1.125" lts="0.01em">
Lorem ipusm<br />Doler sit.
</Heading>
<Text class="u--trim" fz={'clamp(12px, 3.2vw, 1.25rem)'} pt="1.5em" lts="l" max-sz="s">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Stack>
<Box px="25" pos="absolute" b="0" r="0">
<Flex as="a" href="#" set="plain" wm="vertical-rl" ai="center" g="15" fz={['11px', '12px']} lh="1" lts="xl" tt="uppercase">
<Inline>Scroll</Inline>
<Divider sz="5em" fxsh="0" bdc="current" o="ppp" />
</Flex>
</Box>
</Stack>
</DemoLayout>
<style>
@layer lism-base {
:root {
--gutter--base: max(var(--s30), 4vw);
}
}
</style>