Call to Action (CTA)
ready
Call to Action feature on a component that links to another page or section.
Example
Loading
Code
HTML
import { NbhdCta } from '@fbin-web/neighborhood-core';<nbhd-cta href="/link-to-go-to"> Call to Action </nbhd-cta>React
import { NbhdCta } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdCta href="/link-to-go-to">Call to Action</NbhdCta>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
href
|
href
|
string
|
#
|
Link to another page or section. |
ariaLabel
|
aria-label
|
string
|
|
Descriptive text for additional context. |
cssClass
|
css-class
|
string
|
|
Additional CSS classes to apply to link. |
external
|
external
|
boolean
|
false
|
Set target to _blank.
|
variant
|
variant
|
primary | secondary | tertiary
|
primary
|
The style variant of CTA. |
Slots
| Name | Description |
|---|---|
| (default) | CTA's label. |
prefix
|
Content rendered before the CTA's label. |
suffix
|
Content rendered after the CTA's label. |
CSS Parts
| Name | Description |
|---|---|
base
|
The CTA's anchor element. |
prefix
|
The slot container for prefix content. |
label
|
The slot container for the CTA's label. |
suffix
|
The slot container for suffix content. |
Primary
Styling properties for the primary CTA variant.
| Property | Default Value |
|---|---|
--nbhd-action-primary-backgroundColor
|
var(--nbhd-color-action-primary-background) |
--nbhd-action-primary-backgroundPosition
|
110% 0 |
--nbhd-action-primary-backgroundRepeat
|
no-repeat |
--nbhd-action-primary-backgroundSize
|
205% 100% |
--nbhd-action-primary-borderColor
|
var(--nbhd-color-action-primary-border) |
--nbhd-action-primary-borderRadius
|
var(--nbhd-border-radius-sm) |
--nbhd-action-primary-borderStyle
|
solid |
--nbhd-action-primary-color
|
var(--nbhd-color-action-primary-foreground) |
--nbhd-action-primary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-primary-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-primary-fontStyle
|
normal |
--nbhd-action-primary-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-primary-inlineSize
|
auto |
--nbhd-action-primary-letterSpacing
|
2px |
--nbhd-action-primary-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-primary-paddingBlock
|
var(--nbhd-base-space-3) |
--nbhd-action-primary-paddingInline
|
var(--nbhd-base-space-9) |
--nbhd-action-primary-textTransform
|
uppercase |
--nbhd-action-primary-gradient-opacity
|
0.25 |
--nbhd-action-primary-hover-backgroundColor
|
var(--nbhd-color-action-primary-hover-background) |
--nbhd-action-primary-hover-backgroundPosition
|
0 0 |
--nbhd-action-primary-hover-borderColor
|
var(--nbhd-color-action-primary-hover-border) |
--nbhd-action-primary-hover-color
|
var(--nbhd-color-action-primary-hover-foreground) |
--nbhd-action-primary-hover-letterSpacing
|
var(--nbhd-action-primary-letterSpacing) |
--nbhd-action-primary-active-backgroundColor
|
var(--nbhd-color-action-primary-active-background) |
--nbhd-action-primary-active-borderColor
|
var(--nbhd-color-action-primary-active-border) |
--nbhd-action-primary-active-color
|
var(--nbhd-color-action-primary-active-foreground) |
--nbhd-action-primary-bpMd-fontSize
|
var(--nbhd-typography-action-bpMd-fontSize) |
--nbhd-action-primary-bpMd-lineHeight
|
var(--nbhd-action-primary-lineHeight) |
Secondary
Styling properties for the secondary CTA variant.
| Property | Default Value |
|---|---|
--nbhd-action-secondary-backgroundColor
|
var(--nbhd-color-action-secondary-background) |
--nbhd-action-secondary-backgroundPosition
|
110% 0 |
--nbhd-action-secondary-backgroundRepeat
|
no-repeat |
--nbhd-action-secondary-backgroundSize
|
205% 100% |
--nbhd-action-secondary-borderColor
|
var(--nbhd-color-action-secondary-border) |
--nbhd-action-secondary-borderRadius
|
var(--nbhd-border-radius-sm) |
--nbhd-action-secondary-borderStyle
|
solid |
--nbhd-action-secondary-color
|
var(--nbhd-color-action-secondary-foreground) |
--nbhd-action-secondary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-secondary-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-secondary-fontStyle
|
normal |
--nbhd-action-secondary-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-secondary-inlineSize
|
auto |
--nbhd-action-secondary-letterSpacing
|
2px |
--nbhd-action-secondary-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-secondary-paddingBlock
|
var(--nbhd-base-space-3) |
--nbhd-action-secondary-paddingInline
|
var(--nbhd-base-space-9) |
--nbhd-action-secondary-textTransform
|
uppercase |
--nbhd-action-secondary-gradient-opacity
|
1 |
--nbhd-action-secondary-hover-backgroundColor
|
var(--nbhd-color-action-secondary-hover-background) |
--nbhd-action-secondary-hover-backgroundPosition
|
0 0 |
--nbhd-action-secondary-hover-borderColor
|
var(--nbhd-color-action-secondary-hover-border) |
--nbhd-action-secondary-hover-color
|
var(--nbhd-color-action-secondary-hover-foreground) |
--nbhd-action-secondary-hover-letterSpacing
|
var(--nbhd-action-secondary-letterSpacing) |
--nbhd-action-secondary-active-backgroundColor
|
var(--nbhd-color-action-secondary-active-background) |
--nbhd-action-secondary-active-borderColor
|
var(--nbhd-color-action-secondary-active-border) |
--nbhd-action-secondary-active-color
|
var(--nbhd-color-action-secondary-active-foreground) |
--nbhd-action-secondary-bpMd-fontSize
|
var(--nbhd-typography-action-bpMd-fontSize) |
--nbhd-action-secondary-bpMd-lineHeight
|
var(--nbhd-action-primary-lineHeight) |
Tertiary
Styling properties for the tertiary CTA variant.
| Property | Default Value |
|---|---|
--nbhd-action-tertiary-backgroundColor
|
transparent |
--nbhd-action-tertiary-borderWidth
|
0 |
--nbhd-action-tertiary-color
|
var(--nbhd-color-action-tertiary-foreground) |
--nbhd-action-tertiary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-tertiary-fontSize
|
var(--nbhd-typography-bodySmall-fontSize) |
--nbhd-action-tertiary-letterSpacing
|
normal |
--nbhd-action-tertiary-paddingBlock
|
var(--nbhd-base-space-0) var(--nbhd-base-space-3) |
--nbhd-action-tertiary-paddingInline
|
var(--nbhd-base-space-0) |
--nbhd-action-tertiary-textTransform
|
none |
--nbhd-action-tertiary-transitionDuration
|
0.1s |
--nbhd-action-tertiary-transitionProperty
|
all |
--nbhd-action-tertiary-zIndex
|
var(--nbhd-base-z-1) |
--nbhd-action-tertiary-underline-color
|
var(--nbhd-color-action-tertiary-border) |
--nbhd-action-tertiary-underline-height
|
2px |
--nbhd-action-tertiary-underline-zIndex
|
var(--nbhd-base-z-below) |
--nbhd-action-tertiary-hover-backgroundColor
|
var(--nbhd-color-action-tertiary-hover-background) |
--nbhd-action-tertiary-hover-color
|
var(--nbhd-color-action-tertiary-hover-foreground) |
--nbhd-action-tertiary-hover-underline-color
|
var(--nbhd-color-action-tertiary-hover-border) |
--nbhd-action-tertiary-hover-underline-height
|
5px |
--nbhd-action-tertiary-active-backgroundColor
|
var(--nbhd-color-action-tertiary-active-background) |
--nbhd-action-tertiary-active-color
|
var(--nbhd-color-action-tertiary-active-foreground) |
--nbhd-action-tertiary-active-underline-color
|
var(--nbhd-color-action-tertiary-active-border) |
--nbhd-action-tertiary-active-underline-height
|
5px |