- Accordion
- Badge
- Breadcrumbs
- Button
- Card
- Checkbox
- Collapse
- Data table
- Data table simple
- Dropdown select
- File input
- Form message
- Modal
- Pagination
- Popover
- Progress
- Progress circle
- Radio button
- Radio cards
- Rating
- Segmented control
- Skeleton
- Slider
- Support
- Tabs
- Textarea
- Text input
- Toggle
- Tooltip
- Verification code
- Video
- View more
CTA banner
Full-width banner that displays a heading, subtitle, and call to action. The call to action can be a button, zip code form, or something custom. Subtitle is optional and can be omitted.
Intended for use either within a full-width page layout or one slightly constrained to 10 columns on large desktop breakpoints (shown in the examples below).
Default with zip code form
This is the default layout, designed to show a zip code form and display nicely within a limited-width container. The second example has background set to dark-blue.
Default with subtitle and button
By default, the cta section will display at a larger width to accommodate a zip code form. When using a button, set the hasButton prop to true, and the CTA section will reduce in width.
Our installer network is growing every day. Explore options in your state.
Stacked with subtitle and email form
The stacked variant will always keep the heading and subtitle above the CTA section on all breakpoints. This is useful when the form's text input needs to be wider, as in the case of an email signup form (a nonfunctional form is shown below just for illustrative layout purposes). The example below also demonstrates using the sideImage slot and the alignMobile, background, and sideImageContainerClass props.
Plug in for monthly energy-saving tips, climate news, sustainability trends and more.
Semi-wide with subtitle and email form
The semi-wide variant gives more width to the heading and subtitle than the default variant at the lg breakpoint and up, and more width to the cta slot than the wide variant. It's recommended for email form CTAs that will go full width like the one below.
Plug in for monthly energy-saving tips, climate news, sustainability trends and more.
Wide with zip code form
Set the variant prop to 'wide' when the banner will display full width on a page. The heading text will appear larger on desktop, and the side padding will increase.
Wide with subtitle and button
By default, the cta section will display at a larger width to accommodate a zip code form. When using a button, set the hasButton prop to true, and the CTA section will reduce in width.
Our installer network is growing every day. Explore options in your state.
Deprecated dark prop
This example has the deprecated prop dark set to true, just to illustrate that it still works as the equivalent to setting background to dark-blue. This functionality will be removed in a future release, so we recommend refactoring away from dark in favor of background.
EsCtaBanner slots
- Name
cta
- Default
- n/a
- Description
- The call to action itself. Meant to be an EsButton or EsZipCodeForm.
- Name
heading
- Default
'Easily find what solar costs in your area'
- Description
- The banner heading.
- Name
sideImage
- Default
- n/a
- Description
- A narrow-width image that will appear on the right side of the banner.
- Name
subtitle
- Default
- n/a
- Description
- Optional. The text that should appear below the heading.
EsCtaBanner props
- Name
alignMobile
- Type
String
- Default
'center'
- Description
- Controls the text alignment on mobile. Can be 'left', 'center', or 'right'.
- Name
background
- Type
String
- Default
'none'
- Description
- Sets the background of the banner. Can be 'none', 'blue-300-radial', or 'dark-blue'. The dark-blue option corresponds to what setting the dark prop to true did before.
- Name
dark
- Type
Boolean
- Default
false
- Description
- DEPRECATED; use background instead. Renders the banner with white text on a dark background.
- Name
hasButton
- Type
Boolean
- Default
false
- Description
- If true, will give the heading (and subtitle, if any) more room on desktop, and reduce the width of the button container.
- Name
sideImageContainerClass
- Type
String
- Default
''
- Description
- The class(es) that should be applied to the containing element around the sideImage. Useful for custom positioning of the side image at different breakpoints.
- Name
variant
- Type
String
- Default
'default'
- Description
- Accepts 'default', 'stacked', 'semi-wide', or 'wide'. The default variant has a smaller heading size and reduced padding. The semi-wide variant is the same as default but is intended to be displayed at full page width and gives more room to the heading. The wide variant has a larger heading size and larger padding on desktop.