React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CTA
Basic Usage General Guidelines Vertical Alignment API CTAStart CTACenter CTAEnd Center FormLayout Grid List Media Toolbar
CSS Helpers
Readme

# CTA

The responsive CTA layout holds an action at the center and two additional elements on sides.

##
Basic Usage

To implement the CTA component, you need to import it first:

    import { CTA } from '@react-ui-org/react-ui';

And use it:

Start
Center
End
<Placeholder bordered> <CTA> <CTAStart> <Placeholder bordered>Start</Placeholder> </CTAStart> <CTACenter> <Placeholder bordered>Center</Placeholder> </CTACenter> <CTAEnd> <Placeholder bordered>End</Placeholder> </CTAEnd> </CTA> </Placeholder>

    <Placeholder bordered>  <CTA>    <CTAStart>      <Placeholder bordered>Start</Placeholder>    </CTAStart>    <CTACenter>      <Placeholder bordered>Center</Placeholder>    </CTACenter>    <CTAEnd>      <Placeholder bordered>End</Placeholder>    </CTAEnd>  </CTA></Placeholder>

See
API for all available options.

## General Guidelines

- The CTA (call to action) layout is designed for an
  action placed at the center of its parent and two optional side elements. It works perfectly especially in composition with a load-more button.

- Place rather a few smaller elements into the layout, so they fit the screen even at the smallest size. For complex layouts and a lot of actions, consider using the Toolbar layout.

👉 On screen sizes smaller than 66 em (the
`lg` breakpoint), the start element expands over the full width of its parent. Please resize your browser rather than the playground to see this work.

## Vertical Alignment

There are four options of vertical alignment: baseline (default), top, middle, and bottom.

Start
Center
Element
End
<Placeholder bordered> <CTA align="bottom"> <CTAStart> <Placeholder bordered>Start</Placeholder> </CTAStart> <CTACenter> <Placeholder bordered> Center <br /> Element </Placeholder> </CTACenter> <CTAEnd> <Placeholder bordered>End</Placeholder> </CTAEnd> </CTA> </Placeholder>

    <Placeholder bordered>  <CTA align="bottom">    <CTAStart>      <Placeholder bordered>Start</Placeholder>    </CTAStart>    <CTACenter>      <Placeholder bordered>        Center        <br />        Element      </Placeholder>    </CTACenter>    <CTAEnd>      <Placeholder bordered>End</Placeholder>    </CTAEnd>  </CTA></Placeholder>

## API

align
'top' │ 'middle' │ 'bottom' │ 'baseline'
'baseline'
children
node
required

## CTAStart

The start element of the CTA layout.

children
node
required

## CTACenter

The center element of the CTA layout.

children
node
required

## CTAEnd

The end element of the CTA layout.

children
node
required

Next: Center →