# Basic sections > Page-level compositions built from the components, for marketing sites and application screens. URL: https://apogee.avaui.dev/docs/sections Last updated: 2026-10-15 Page-level compositions built from the components, for marketing sites and application screens. Last updated October 15, 2026 A section is a whole band of a page: a hero, a pricing table, a settings form. Each takes a `layout`, `background`, `spacing` and `headingLevel`, and `apogee add
` copies it in with the components it uses. ```sh npx @ava-ui/apogee add hero pricing # copies the sections and their components ``` [ ![](https://apogee.avaui.dev/thumbs/sections__hero.light.webp)![](https://apogee.avaui.dev/thumbs/sections__hero.dark.webp) HeroThe opening section — eyebrow, heading, description, actions and optional media, in three layouts. ](https://apogee.avaui.dev/docs/sections/hero)[ ![](https://apogee.avaui.dev/thumbs/sections__logo-cloud.light.webp)![](https://apogee.avaui.dev/thumbs/sections__logo-cloud.dark.webp) LogoCloudA row or grid of customer and partner logos. ](https://apogee.avaui.dev/docs/sections/logo-cloud)[ ![](https://apogee.avaui.dev/thumbs/sections__features.light.webp)![](https://apogee.avaui.dev/thumbs/sections__features.dark.webp) FeaturesBenefits as a 3-up icon grid, alternating rows with media, or a list. ](https://apogee.avaui.dev/docs/sections/features)[ ![](https://apogee.avaui.dev/thumbs/sections__stats.light.webp)![](https://apogee.avaui.dev/thumbs/sections__stats.dark.webp) StatsHeadline numbers in a row or as cards. ](https://apogee.avaui.dev/docs/sections/stats)[ ![](https://apogee.avaui.dev/thumbs/sections__testimonials.light.webp)![](https://apogee.avaui.dev/thumbs/sections__testimonials.dark.webp) TestimonialsOne featured quote, or a grid of quote cards. ](https://apogee.avaui.dev/docs/sections/testimonials)[ ![](https://apogee.avaui.dev/thumbs/sections__cta.light.webp)![](https://apogee.avaui.dev/thumbs/sections__cta.dark.webp) CTAA closing call to action, centred or split with the actions on the end side. ](https://apogee.avaui.dev/docs/sections/cta)[ ![](https://apogee.avaui.dev/thumbs/sections__faq.light.webp)![](https://apogee.avaui.dev/thumbs/sections__faq.dark.webp) FAQQuestions and answers as an accordion or a two-column list. Zero JS. ](https://apogee.avaui.dev/docs/sections/faq)[ ![](https://apogee.avaui.dev/thumbs/sections__content.light.webp)![](https://apogee.avaui.dev/thumbs/sections__content.dark.webp) ContentA text block beside media, or long-form prose. ](https://apogee.avaui.dev/docs/sections/content)[ ![](https://apogee.avaui.dev/thumbs/sections__team.light.webp)![](https://apogee.avaui.dev/thumbs/sections__team.dark.webp) TeamPeople as a grid of cards or a list with bios. ](https://apogee.avaui.dev/docs/sections/team)[ ![](https://apogee.avaui.dev/thumbs/sections__pricing.light.webp)![](https://apogee.avaui.dev/thumbs/sections__pricing.dark.webp) PricingPlan tiers side by side, with an optional monthly / annual switch. ](https://apogee.avaui.dev/docs/sections/pricing)[ ![](https://apogee.avaui.dev/thumbs/sections__blog-list.light.webp)![](https://apogee.avaui.dev/thumbs/sections__blog-list.dark.webp) Blog listPost cards in a grid, or one featured post above the grid. ](https://apogee.avaui.dev/docs/sections/blog-list)[ ![](https://apogee.avaui.dev/thumbs/sections__post-header.light.webp)![](https://apogee.avaui.dev/thumbs/sections__post-header.dark.webp) Post headerThe top of an article; category, title, byline, date, reading time, cover image. ](https://apogee.avaui.dev/docs/sections/post-header)[ ![](https://apogee.avaui.dev/thumbs/sections__contact.light.webp)![](https://apogee.avaui.dev/thumbs/sections__contact.dark.webp) ContactA message form, with or without a column of contact details. ](https://apogee.avaui.dev/docs/sections/contact)[ ![](https://apogee.avaui.dev/thumbs/sections__not-found.light.webp)![](https://apogee.avaui.dev/thumbs/sections__not-found.dark.webp) Not foundThe 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media. ](https://apogee.avaui.dev/docs/sections/not-found)[ ![](https://apogee.avaui.dev/thumbs/sections__auth-shell.light.webp)![](https://apogee.avaui.dev/thumbs/sections__auth-shell.dark.webp) Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar. ](https://apogee.avaui.dev/docs/sections/auth-shell)[ ![](https://apogee.avaui.dev/thumbs/sections__footer-section.light.webp)![](https://apogee.avaui.dev/thumbs/sections__footer-section.dark.webp) Footer sectionA ready site footer; link columns or a single row, copyright and social links. ](https://apogee.avaui.dev/docs/sections/footer-section)[ ![](https://apogee.avaui.dev/thumbs/sections__page-header.light.webp)![](https://apogee.avaui.dev/thumbs/sections__page-header.dark.webp) Page headerThe top of an application page; breadcrumbs, title, description, actions, tab links. ](https://apogee.avaui.dev/docs/sections/page-header)[ ![](https://apogee.avaui.dev/thumbs/sections__stats-cards.light.webp)![](https://apogee.avaui.dev/thumbs/sections__stats-cards.dark.webp) Stats cardsA row of metric cards for dashboards. ](https://apogee.avaui.dev/docs/sections/stats-cards)[ ![](https://apogee.avaui.dev/thumbs/sections__settings-form.light.webp)![](https://apogee.avaui.dev/thumbs/sections__settings-form.dark.webp) Settings formGroups of fields described by data, rendered as one plain HTML form. ](https://apogee.avaui.dev/docs/sections/settings-form)[ ![](https://apogee.avaui.dev/thumbs/sections__table-shell.light.webp)![](https://apogee.avaui.dev/thumbs/sections__table-shell.dark.webp) Table shellA data table with its toolbar and pagination. ](https://apogee.avaui.dev/docs/sections/table-shell)[ ![](https://apogee.avaui.dev/thumbs/sections__empty-state-section.light.webp)![](https://apogee.avaui.dev/thumbs/sections__empty-state-section.dark.webp) Empty state sectionAn EmptyState with section spacing, for a whole empty page or panel. ](https://apogee.avaui.dev/docs/sections/empty-state-section)[ ![](https://apogee.avaui.dev/thumbs/sections__banner.light.webp)![](https://apogee.avaui.dev/thumbs/sections__banner.dark.webp) BannerA one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button. ](https://apogee.avaui.dev/docs/sections/banner)