- Accordion
- Badge
- Breadcrumbs
- Button
- Card
- Checkbox
- Collapse
- Data table
- Data table simple
- File input
- Form message
- Modal
- Pagination
- Popover
- Progress
- Progress circle
- Radio button
- Radio cards
- Rating
- Segmented control
- Skeleton
- Slider
- Support
- Tabs
- Textarea
- Text input
- Tooltip
- Verification code
- Video
- View more
CTA card
A card that displays a heading, image, subtitle, and call to action. The call to action can be a link, button, or zip code form. Image and subtitle are optional and can be omitted.
Intended for use within a width-constrained grid column layout on larger breakpoints, either on the left rail of a page layout or side by side with other CTA cards.
Default with zip code form
)
Image first with button
Upgrade your heating and cooling with a new heat pump
100% free to use, 100% online
Access the lowest prices
Free, expert advice along the way
Image first with link
No image with zip code form
Easily find what solar costs in your area
Your information is safe with us. Privacy Policy
EsCtaCard slots
- Name
heading
- Default
'Easily find what solar costs in your area'
- Description
- The card heading.
- Name
image
- Default
- n/a
- Description
- Optional. The image for the card.
- Name
subtitle
- Default
- n/a
- Description
- Optional. The paragraph(s) of text that should appear below the heading and/or image.
- Name
cta
- Default
- n/a
- Description
- The call to action itself. Meant to be an EsButton, EsZipCodeForm, or a link.
EsCtaCard props
- Name
imageFirst
- Type
Boolean
- Default
false
- Description
- If true, reorders the elements so the image appears above the heading.
- Name
horizontalPadding
- Type
String
- Default
'px-100'
- Description
- The padding on the left and right sides of the card. Defaults to 16px.
- Name
verticalSpacing
- Type
String
- Default
'mb-150'
- Description
- The vertical spacing between elements in the card. Defaults to 24px.