# Large screen mockup 01

> A centred heading over a full-width screenshot cropped at the bottom edge.

URL: https://apogee.avaui.dev/docs/features-sections/large-screen-mockup-01
Last updated: 2026-10-20

A centred heading over a full-width screenshot cropped at the bottom edge.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/features/large-screen-mockup-01

```astro
---
/**
 * Large screen mockup 01: A centred heading over a full-width screenshot cropped at the bottom edge.
 *
 * @block features
 * @order 25
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import DeviceFrame from '@/components/apogee/DeviceFrame/DeviceFrame.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { FeaturesContent } from '@/components/apogee/sections/_shared/features.ts'

/** @composable */
interface Props extends FeaturesContent {}

const {
  eyebrow = 'Features',
  heading = 'Your whole business at a glance',
  description = 'Powerful, self-serve product and growth analytics to help you convert, engage and retain more users. Trusted by over 4,000 startups.',
  media = { src: '/mockups/app-desktop-light.jpg', srcDark: '/mockups/app-desktop-dark.jpg', alt: 'The dashboard overview in a browser' },
} = Astro.props
---

<Section spacing="large" class="pb-0!">
  <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} align="center" class="mb-12 md:mb-16" />
  {media && <div class="max-h-105 overflow-hidden mask-b-from-70% md:max-h-140">
    <DeviceFrame device="browser" src={media.src} srcDark={media.srcDark} alt={media.alt} width={media.width} height={media.height} class="" />
  </div>}
</Section>
```

## Add

```sh
npx @ava-ui/apogee add features/large-screen-mockup-01
```

This copies the block to `src/components/apogee/blocks/features/` with everything it uses: DeviceFrame, Section, SectionHeader. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/features-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.

## Related

[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)[

TabsSwitch between panels of related content in the same space.

](https://apogee.avaui.dev/docs/tabs)[

DeviceFrameA screenshot in a phone, a landscape tablet or a browser window, drawn in CSS with the theme's colours; it scales as a whole and a dark screenshot swaps in with the theme.

](https://apogee.avaui.dev/docs/device-frame)