# CTA sections > Calls to action; simple, with logos, photos, sliding testimonials, phone and browser mockups, image collages and cards, on the page or the brand colour. URL: https://apogee.avaui.dev/docs/cta-sections Last updated: 2026-10-20 Calls to action; simple, with logos, photos, sliding testimonials, phone and browser mockups, image collages and cards, on the page or the brand colour. Last updated October 20, 2026 Each example is a block: a heading, a line and one or two actions, with logos, a photo, a sliding testimonial, the product in a [DeviceFrame](https://apogee.avaui.dev/docs/device-frame) (a phone or a browser window), an image collage or a card around it. ```sh npx @ava-ui/apogee add cta/simple-centered ``` The phone and browser blocks show screenshots from `/mockups/` (the Apogee dashboard); put your own product’s screenshots there, a light and a dark one. ## Copy is props Every block in this family takes the same content props (`CTAContent` in `sections/_shared/cta.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 [CTA](https://apogee.avaui.dev/docs/sections/cta) 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. - `primaryAction`: The solid button (the first of two equal buttons). - `secondaryAction`: The outline button. - `media`: The photo or screenshot beside or under the copy. - 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/cta-sections__simple-centered.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-centered.dark.webp) Simple centredA centred heading, line and two buttons. ](https://apogee.avaui.dev/docs/cta-sections/simple-centered)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-left.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-left.dark.webp) Simple leftA heading and line with two buttons beside them from lg. ](https://apogee.avaui.dev/docs/cta-sections/simple-left)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-01.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-01.dark.webp) Simple logos 01A centred heading, line and two buttons over a row of customer logos. ](https://apogee.avaui.dev/docs/cta-sections/simple-logos-01)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-02.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-02.dark.webp) Simple logos 02A heading and two buttons beside a grid of customer logos. ](https://apogee.avaui.dev/docs/cta-sections/simple-logos-02)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-01.dark.webp) Split image 01A heading, three checks and two buttons beside a photo. ](https://apogee.avaui.dev/docs/cta-sections/split-image-01)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-02.dark.webp) Split image 02A heading, line and two buttons beside a portrait photo. ](https://apogee.avaui.dev/docs/cta-sections/split-image-02)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-03.dark.webp) Split image 03A centred heading block on a tinted band over a wide photo. ](https://apogee.avaui.dev/docs/cta-sections/split-image-03)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-04.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-04.dark.webp) Split image 04A brand-colour card: a heading and two buttons beside a photo. ](https://apogee.avaui.dev/docs/cta-sections/split-image-04)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-01.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-01.dark.webp) Split image quote 01A heading, three checks and two buttons beside a sliding testimonial. ](https://apogee.avaui.dev/docs/cta-sections/split-image-quote-01)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-02.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-02.dark.webp) Split image quote 02A heading and two buttons beside a sliding testimonial. ](https://apogee.avaui.dev/docs/cta-sections/split-image-quote-02)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-03.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-03.dark.webp) Split image quote 03A sliding testimonial (first from lg) beside a heading, three checks and two buttons. ](https://apogee.avaui.dev/docs/cta-sections/split-image-quote-03)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-04.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__split-image-quote-04.dark.webp) Split image quote 04A heading and two buttons beside a sliding testimonial with company and role. ](https://apogee.avaui.dev/docs/cta-sections/split-image-quote-04)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-01.dark.webp) Phone mockup 01A heading, line and app download buttons beside a phone showing the app. ](https://apogee.avaui.dev/docs/cta-sections/iphone-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-02.dark.webp) Phone mockup 02A heading and download buttons beside a phone rising out of a tinted band. ](https://apogee.avaui.dev/docs/cta-sections/iphone-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-03.dark.webp) Phone mockup 03A heading and download buttons beside two phones side by side. ](https://apogee.avaui.dev/docs/cta-sections/iphone-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__iphone-mockup-04.dark.webp) Phone mockup 04A brand-colour card: a heading and download buttons beside a phone. ](https://apogee.avaui.dev/docs/cta-sections/iphone-mockup-04)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-01.dark.webp) Screen mockup 01A heading, three checks and two buttons beside the app in a browser window. ](https://apogee.avaui.dev/docs/cta-sections/screen-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-02.dark.webp) Screen mockup 02A heading and two buttons beside the app in a browser window (from lg). ](https://apogee.avaui.dev/docs/cta-sections/screen-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-03.dark.webp) Screen mockup 03A centred heading and two buttons over the app in a browser window. ](https://apogee.avaui.dev/docs/cta-sections/screen-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__screen-mockup-04.dark.webp) Screen mockup 04A tinted card: a heading and two buttons beside the app in a browser window. ](https://apogee.avaui.dev/docs/cta-sections/screen-mockup-04)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__abstract-images.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__abstract-images.dark.webp) Abstract imagesA heading and two buttons beside a collage of five images. ](https://apogee.avaui.dev/docs/cta-sections/abstract-images)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__card-horizontal.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__card-horizontal.dark.webp) Card horizontalA tinted card with a heading and line beside two buttons. ](https://apogee.avaui.dev/docs/cta-sections/card-horizontal)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__card-vertical.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__card-vertical.dark.webp) Card verticalA centred tinted card with a heading, line and two buttons. ](https://apogee.avaui.dev/docs/cta-sections/card-vertical)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-centered-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-centered-brand.dark.webp) Simple centred brandSimple centred on the brand colour. ](https://apogee.avaui.dev/docs/cta-sections/simple-centered-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-left-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-left-brand.dark.webp) Simple left brandSimple left on the brand colour. ](https://apogee.avaui.dev/docs/cta-sections/simple-left-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-01-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-01-brand.dark.webp) Simple logos 01 brandSimple logos 01 on the brand colour. ](https://apogee.avaui.dev/docs/cta-sections/simple-logos-01-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-02-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__simple-logos-02-brand.dark.webp) Simple logos 02 brandSimple logos 02 on the brand colour. ](https://apogee.avaui.dev/docs/cta-sections/simple-logos-02-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__card-horizontal-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__card-horizontal-brand.dark.webp) Card horizontal brandA brand-colour card, centred, with a heading, line and two buttons. ](https://apogee.avaui.dev/docs/cta-sections/card-horizontal-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__card-vertical-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__card-vertical-brand.dark.webp) Card vertical brandA brand-colour card with the heading and line beside two buttons from lg. ](https://apogee.avaui.dev/docs/cta-sections/card-vertical-brand)[ ![](https://apogee.avaui.dev/thumbs/cta-sections__abstract-images-brand.light.webp)![](https://apogee.avaui.dev/thumbs/cta-sections__abstract-images-brand.dark.webp) Abstract images brandAbstract images on the brand colour. ](https://apogee.avaui.dev/docs/cta-sections/abstract-images-brand) ## Related [ 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)[ ButtonTriggers an action. Renders a