# Features sections > Feature sections; alternating rows, icon grids, icons beside a photo, phone or screenshot, payment cards, feature tabs that switch screenshots and integration icons, on the page or the brand colour. URL: https://apogee.avaui.dev/docs/features-sections Last updated: 2026-10-20 Feature sections; alternating rows, icon grids, icons beside a photo, phone or screenshot, payment cards, feature tabs that switch screenshots and integration icons, on the page or the brand colour. Last updated October 20, 2026 Each example is a block: a heading over the features, as a grid of icons, rows beside a screenshot, a [DeviceFrame](https://apogee.avaui.dev/docs/device-frame) phone or browser, a [PaymentCard](https://apogee.avaui.dev/docs/payment-card) stack or a [VideoPlayer](https://apogee.avaui.dev/docs/video-player), or as feature [Tabs](https://apogee.avaui.dev/docs/tabs) that switch what the screenshot shows. ```sh npx @ava-ui/apogee add features/simple-icons-02 ``` The screenshot blocks show the Apogee dashboard from `/mockups/` (overview, customers and settings, light and dark); put your own product’s screenshots there. ## Copy is props Every block in this family takes the same content props (`FeaturesContent` in `sections/_shared/features.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The [Features](https://apogee.avaui.dev/docs/sections/features) section takes the same names for the props they share. - `eyebrow`: The small label above the heading. - `heading`: The heading. - `description`: The line under the heading. - `label`: Landmark name when the block shows no heading. - `items`: The features. An item’s link shows when it has an `href`. - `linkLabel`: Text of item links without their own `linkLabel`. - `media`: The main image or screenshot beside or under the features. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-01.dark.webp) Alternating layout 01A centred heading over three rows of text and a screenshot, swapping sides, each with three points. ](https://apogee.avaui.dev/docs/features-sections/alternating-layout-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-02.dark.webp) Alternating layout 02A centred heading over three rows of text, buttons and a screenshot on a panel, swapping sides. ](https://apogee.avaui.dev/docs/features-sections/alternating-layout-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-03.dark.webp) Alternating layout 03A centred heading over three rows: a screenshot, two phones, and a screenshot with a phone over it. ](https://apogee.avaui.dev/docs/features-sections/alternating-layout-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-04.dark.webp) Alternating layout 04A centred heading over three rows of text and a tall photo, swapping sides. ](https://apogee.avaui.dev/docs/features-sections/alternating-layout-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-01.dark.webp) Simple icons 01Three features with icons, centred, with no heading. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-02.dark.webp) Simple icons 02A centred heading over six features with icons. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-03.dark.webp) Simple icons 03A heading over six features with icons and a link each. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-04.dark.webp) Simple icons 04An icon and heading beside six features in two columns. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-01.dark.webp) Icons and image 01A heading over four features with icons beside a screenshot on a panel. ](https://apogee.avaui.dev/docs/features-sections/icons-and-image-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-02.dark.webp) Icons and image 02A heading over three features with icons and links beside a photo. ](https://apogee.avaui.dev/docs/features-sections/icons-and-image-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-03.dark.webp) Icons and image 03A heading and two features on a tinted band, over a video that overlaps it. ](https://apogee.avaui.dev/docs/features-sections/icons-and-image-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-image-04.dark.webp) Icons and image 04A heading and two features on a tinted band, over a wide photo that overlaps it. ](https://apogee.avaui.dev/docs/features-sections/icons-and-image-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icon-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icon-cards-01.dark.webp) Icon cards 01A heading over four feature cards in a row, each with a link. ](https://apogee.avaui.dev/docs/features-sections/icon-cards-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icon-cards-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icon-cards-02.dark.webp) Icon cards 02An icon and heading beside four feature cards, each with a link. ](https://apogee.avaui.dev/docs/features-sections/icon-cards-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__center-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__center-mockup-01.dark.webp) Center mockup 01A centred heading over a large screenshot, then three features with links. ](https://apogee.avaui.dev/docs/features-sections/center-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__center-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__center-mockup-02.dark.webp) Center mockup 02A centred heading over a screenshot with a phone in front, then three features with links. ](https://apogee.avaui.dev/docs/features-sections/center-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-01.dark.webp) Icons and mockup 01A heading over four features with icons beside a phone. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-02.dark.webp) Icons and mockup 02A heading over three features with links beside a phone. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-03.dark.webp) Icons and mockup 03A heading over three features with links beside two phones. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-04.dark.webp) Icons and mockup 04A centred heading over a phone with two features on each side. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-05.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-05.dark.webp) Icons and mockup 05A centred heading over a chart card with two features on each side. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-05)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-06.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-06.dark.webp) Icons and mockup 06A heading over three features with links beside two payment cards. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-06)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-07.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-07.dark.webp) Icons and mockup 07A heading over three features with links beside a stack of four payment cards. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-07)[ ![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-08.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__icons-and-mockup-08.dark.webp) Icons and mockup 08A heading over three features with links beside three payment cards fanned on the brand colour. ](https://apogee.avaui.dev/docs/features-sections/icons-and-mockup-08)[ ![](https://apogee.avaui.dev/thumbs/features-sections__large-screen-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__large-screen-mockup-01.dark.webp) Large screen mockup 01A centred heading over a full-width screenshot cropped at the bottom edge. ](https://apogee.avaui.dev/docs/features-sections/large-screen-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__large-screen-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__large-screen-mockup-02.dark.webp) Large screen mockup 02A centred heading on a tinted band, over a full-width screenshot that overlaps it. ](https://apogee.avaui.dev/docs/features-sections/large-screen-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-01.dark.webp) Tabs mockup 01A heading over a screenshot, with feature tabs under it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-02.dark.webp) Tabs mockup 02A heading over two phones, with feature tabs under it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-03.dark.webp) Tabs mockup 03A heading over a phone, with feature tabs under it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-04.dark.webp) Tabs mockup 04A heading over a phone on an arch with notifications beside it, with feature tabs under it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-05.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-05.dark.webp) Tabs mockup 05A heading over a screenshot on a panel, with feature tabs beside it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-05)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-06.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-06.dark.webp) Tabs mockup 06A heading over a screenshot with a phone in front, with feature tabs beside it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-06)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-07.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-07.dark.webp) Tabs mockup 07A heading over a screenshot, with feature tabs beside it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-07)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-08.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-08.dark.webp) Tabs mockup 08A heading over a screenshot on a tinted panel, with feature tabs beside it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-08)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-09.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-09.dark.webp) Tabs mockup 09A heading over two phones, with feature tabs beside it that switch what it shows. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-09)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-10.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-10.dark.webp) Tabs mockup 10A heading over feature tabs beside payment cards; each tab shows its own arrangement. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-10)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-11.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-11.dark.webp) Tabs mockup 11A heading over feature tabs beside a stack of payment cards; each tab shows its own arrangement. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-11)[ ![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-12.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__tabs-mockup-12.dark.webp) Tabs mockup 12A heading over feature tabs beside payment cards on the brand colour; each tab shows its own arrangement. ](https://apogee.avaui.dev/docs/features-sections/tabs-mockup-12)[ ![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-01.dark.webp) Integrations icons 01A heading and two buttons beside a grid of eight integration icons. ](https://apogee.avaui.dev/docs/features-sections/integrations-icons-01)[ ![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-02.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-02.dark.webp) Integrations icons 02A centred heading over sixteen integration icons and a button. ](https://apogee.avaui.dev/docs/features-sections/integrations-icons-02)[ ![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-03.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-03.dark.webp) Integrations icons 03A centred heading over six integrations with icons and links. ](https://apogee.avaui.dev/docs/features-sections/integrations-icons-03)[ ![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-04.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__integrations-icons-04.dark.webp) Integrations icons 04A centred heading over six integration cards, each icon overlapping its card. ](https://apogee.avaui.dev/docs/features-sections/integrations-icons-04)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-01-brand.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-01-brand.dark.webp) Simple icons 01 brandThree features with icons, centred, with no heading, on the brand colour. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-01-brand)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-02-brand.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-02-brand.dark.webp) Simple icons 02 brandA centred heading over six features with icons, on the brand colour. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-02-brand)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-03-brand.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-03-brand.dark.webp) Simple icons 03 brandA heading over six features with icons and a link each, on the brand colour. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-03-brand)[ ![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-04-brand.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__simple-icons-04-brand.dark.webp) Simple icons 04 brandAn icon and heading beside six features in two columns, on the brand colour. ](https://apogee.avaui.dev/docs/features-sections/simple-icons-04-brand) ## 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)[ VideoPlayerA native video behind a poster and one large play button; the browser's own controls take over once it plays. ](https://apogee.avaui.dev/docs/video-player)[ PaymentCardA payment card drawn in CSS, solid or frosted glass, for pricing, billing and feature sections. ](https://apogee.avaui.dev/docs/payment-card)