Call to Action (CTA)
ready
Call to Action feature on a component that links to another page or section.
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. |
external
|
external
|
boolean
|
false
|
Set target to _blank.
|
ariaLabel
|
aria-label
|
string
|
Descriptive text for additional context. | |
variant
|
variant
|
default | primary | secondary | tertiary
|
default
|
The style variant of CTA. |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to link. | |
dark
|
dark
|
boolean
|
false
|
Enables dark theme styling for the CTA. |
Slots
| Name | Description |
|---|---|
| (default) | CTA's label. |
prefix
|
Before label. |
suffix
|
After label |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
prefix
|
Container that wraps the prefix. |
label
|
The CTA's label. |
suffix
|
Container that wraps the suffix. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-action-backgroundColor
|
var(--nbhd-color-white) |
--nbhd-action-backgroundColor-hover
|
var(--nbhd-action-backgroundColor) |
--nbhd-action-backgroundImage
|
linear-gradient(...) |
--nbhd-action-backgroundPosition
|
110% 0 |
--nbhd-action-backgroundRepeat
|
no-repeat |
--nbhd-action-backgroundSize
|
205% 100% |
--nbhd-action-borderColor
|
var(--nbhd-color-gray) |
--nbhd-action-borderRadius
|
var(--nbhd-borderRadius-sm, 2px) |
--nbhd-action-borderStyle
|
solid |
--nbhd-action-borderWidth
|
2px |
--nbhd-action-color
|
var(--nbhd-color-black) |
--nbhd-action-color-hover
|
var(--nbhd-action-color, currentColor) |
--nbhd-action-cursor
|
pointer |
--nbhd-action-display
|
inline-block |
--nbhd-action-fontFamily
|
var(--nbhd-fontFamily, inherit) |
--nbhd-action-fontSize
|
var(--nbhd-fontSize-xxs, 11px) |
--nbhd-action-fontSize-bpMd
|
var(--nbhd-action-fontSize) |
--nbhd-action-fontStyle
|
normal |
--nbhd-action-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-action-inlineSize
|
auto |
--nbhd-action-inlineSize-bpMd
|
var(--nbhd-action-inlineSize) |
--nbhd-action-letterSpacing
|
var(--nbhd-letterSpacing-2, 2px) |
--nbhd-action-letterSpacing-hover
|
var(--nbhd-action-letterSpacing) |
--nbhd-action-lineHeight
|
normal |
--nbhd-action-lineHeight-bpMd
|
var(--nbhd-action-lineHeight) |
--nbhd-action-opacity
|
1 |
--nbhd-action-paddingBlock
|
var(--nbhd-space-3, 12px) |
--nbhd-action-paddingInline
|
var(--nbhd-space-9, 36px) |
--nbhd-action-position
|
relative |
--nbhd-action-textAlign
|
center |
--nbhd-action-textDecoration
|
none |
--nbhd-action-textTransform
|
uppercase |
--nbhd-action-transitionDuration
|
0.2s |
--nbhd-action-transitionProperty
|
background-color, background-position, color, text-decoration |
--nbhd-action-transitionFunction
|
ease-in-out |
--nbhd-action-zIndex
|
auto |
--nbhd-action-host-display
|
inline-block |
--nbhd-action-host-display-bpMd
|
var(--nbhd-action-host-display) |