CTACard
The CTACard component is a card with a call-to-action (CTA) button. It displays a title, an optional body text, and a button.
Stay up to date with new positions and news from our offices!
When you travel with us on an EF educational tour, know that we’re dedicated to benefiting the world—both now and for years to come.
Importing
Import the component as follows:
_10import { CTACard } from '@ef-global/backpack/CTACard';_10import { Text } from
Props
| Name | Type | Default | Description |
| align | TextAlign (one of 'start', 'center', 'end') | 'start' | Sets the text alignment of the card's content. |
| radius | CardBorderRadiusValues | 'l' | Sets the border-radius of the card. |
| renderCustomLink | React.ElementType | Allows customizing the link element used within the component. | |
| children | Array of CardTitle, CardBody, and Button | An array containing a CardTitle, an optional CardBody, and a Button. |
Usage
To use the CTACard component, provide the CardTitle, optional CardBody, and Button components as children:
_10<CTACard align="center" radius="l">_10 <Text as="h3" variant="header4">Card Title</Text>_10 <Text>Optional card body text.</Text>_10 <Button>Call to Action</Button>_10</CTACard>
The align prop controls the text alignment of the content, and the radius prop sets the border-radius of the card. The renderCustomLink prop allows you to customize the link element used within the component. Pass a React.ElementType to this prop to use a custom link component.
Examples
Here are a few examples of how to use the CTACard component:
Default CTACard
Stay up to date with new positions and news from our offices!
When you travel with us on an EF educational tour, know that we’re dedicated to benefiting the world—both now and for years to come.
_12 <CTACard>_12 <CardTitle>_12 Stay up to date with new positions and news from our offices!_12 </CardTitle>_12 <CardBody>_12 When you travel with us on an EF educational tour, know that we’re_12 dedicated to benefiting the world—both now and for years to come._12 </CardBody>_12 <Button as='button' size='regular' variant='primary' data-slot='Button'>_12 Primary_12 </Button>_12 </CTACard>
CTACard with Center Alignment
Stay up to date with new positions and news from our offices!
When you travel with us on an EF educational tour, know that we’re dedicated to benefiting the world—both now and for years to come.
_12<CTACard align="center">_12 <CardTitle>_12 Stay up to date with new positions and news from our offices!_12 </CardTitle>_12 <CardBody>_12 When you travel with us on an EF educational tour, know that we’re_12 dedicated to benefiting the world—both now and for years to come._12 </CardBody>_12 <Button as='button' size='regular' variant='primary' data-slot='Button'>_12 Primary_12 </Button>_12</CTACard>
CTACard with Custom Border Radius
Stay up to date with new positions and news from our offices!
When you travel with us on an EF educational tour, know that we’re dedicated to benefiting the world—both now and for years to come.
_12<CTACard radius="xl">_12 <CardTitle>_12 Stay up to date with new positions and news from our offices!_12 </CardTitle>_12 <CardBody>_12 When you travel with us on an EF educational tour, know that we’re_12 dedicated to benefiting the world—both now and for years to come._12 </CardBody>_12 <Button as='button' size='regular' variant='primary' data-slot='Button'>_12 Primary_12 </Button>_12</CTACard>