One Column with Full-bleed Title

---
import DemoPageLayout from '@/layouts/DemoPageLayout.astro';
import { Group, Flow, Wrapper, Container, Stack, Flex, Layer } from 'lism-css/astro';
---

<DemoPageLayout title="One Column Layout">
  <Stack id="wrap" min-h="100vh">
    <!-- header -->
    <Container as="header" isWrapper="l" hasGutter py="20" bgc="base-2" bg=":stripe">
      <Flex jc="between" ai="center" g="15">
        <Group fz="l">Logo</Group>
        <Group>Navigation</Group>
      </Flex>
    </Container>

    <!-- content -->
    <Container as="main" fx="1">
      <Group pos="relative" iso="isolate">
        <Layer layout="frame">
          <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
        </Layer>
        <Layer style={{ backdropFilter: 'blur(.5rem)' }} bgc="black:50%" />
        <Wrapper hasGutter layout="stack" jc="center" c="white" pos="relative" z="1" py="50" min-h="25vh">
          <h1>Post Title</h1>
        </Wrapper>
      </Group>
      <Wrapper as="article" py="50" hasGutter>
        <Flow>
          <p class="-bd">...Content...</p>
          <p class="-bd">...Content...</p>
          <p class="-bd">...Content...</p>
        </Flow>
        <Group as="footer" mbs="50" p="40" bgc="base-2">Post Footer</Group>
      </Wrapper>
    </Container>

    <!-- footer -->
    <Container as="footer" isWrapper hasGutter py="40" bgc="base-2" bg=":stripe">
      <Stack g="20" ai="center">
        <Group fz="l">Footer Area</Group>
        <Group fz="s" c="text-2" util="trim">© 2026 Lism CSS.</Group>
      </Stack>
    </Container>
  </Stack>
</DemoPageLayout>

コードをコピー コードをコピーしました