Call to Action (CTA)
draft
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
Required
|
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 | underlined
|
default
|
The style variant of CTA. |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to link. | |
theme
|
theme
|
light | dark
|
light
|
The theme styling of 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-cta-backgroundColor
|
transparent |
--nbhd-cta-backgroundImage
|
none |
--nbhd-cta-backgroundPosition
|
0 0 |
--nbhd-cta-backgroundSize
|
100% |
--nbhd-cta-borderColor
|
transparent |
--nbhd-cta-borderRadius
|
2px |
--nbhd-cta-borderStyle
|
solid |
--nbhd-cta-borderWidth
|
2px |
--nbhd-cta-color-lightTheme
|
var(--nbhd-fbin-color-fbinNavy) |
--nbhd-cta-color-darkTheme
|
var(--nbhd-color-white) |
--nbhd-cta-color-hover-lightTheme
|
var(--nbhd-fbin-color-fbinNavy) |
--nbhd-cta-color-hover-darkTheme
|
var(--nbhd-color-white) |
--nbhd-cta-cursor
|
pointer |
--nbhd-cta-display
|
inline-block |
--nbhd-cta-fontFamily
|
var(--nbhd-link-fontStack) |
--nbhd-cta-fontSize
|
var(--nbhd-fontSize-xxs) |
--nbhd-cta-fontStyle
|
normal |
--nbhd-cta-fontWeight
|
var(--nbhd-fontWeight-700) |
--nbhd-cta-letterSpacing
|
var(--nbhd-letterSpacing-2) |
--nbhd-cta-paddingBlock
|
var(--nbhd-space-3) |
--nbhd-cta-paddingInline
|
var(--nbhd-space-9) |
--nbhd-cta-position
|
relative |
--nbhd-cta-textAlign
|
center |
--nbhd-cta-textDecoration
|
none |
--nbhd-cta-textDecorationThickness
|
auto |
--nbhd-cta-textDecorationThickness-hover
|
auto |
--nbhd-cta-textDecorationColor
|
inherit |
--nbhd-cta-textTransform
|
uppercase |
--nbhd-cta-textUnderlineOffset
|
auto |
--nbhd-cta-transitionFunction
|
ease-in-out |
--nbhd-cta-transitionDuration
|
0.2s |
--nbhd-cta-transitionProperty
|
background-color, color, text-decoration |