Call to Action (CTA)
ReadyCall to Action feature on a component that links to another page or section.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdCta } from '@fbin-web/neighborhood-core';
Usage
<nbhd-cta href="/link-to-go-to"> Call to Action </nbhd-cta>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdCta } from '@fbin-web/neighborhood-react';
Usage
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 | — | Accessible name for the link, to tell repeated CTAs apart. Start it with the visible text (WCAG 2.5.3 Label in Name), e.g. "Learn more about showers". |
cssClass | css-class | string | — | Additional CSS classes to apply to link. |
external | external | boolean | false | Set target to _blank. |
externalLabel | external-label | string | (opens in a new tab) | Added to the accessible name (visually hidden) when `external` opens the link in a new tab, so it isn’t a surprise. External links also get `rel="noopener noreferrer"`. |
variant | variant | primarysecondarytertiary | primary | The style variant of CTA. |
No properties match.
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. |
nbhd-cta::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-cta or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
Action
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-alignItems | — | center |
|
--nbhd-action-appearance | — | none |
|
--nbhd-action-cursor | — | pointer |
|
--nbhd-action-disabled-cursor | — | not-allowed |
|
--nbhd-action-disabled-opacity | --nbhd-opacity-disabled | 0.35 |
|
--nbhd-action-display | — | inline-flex |
|
--nbhd-action-font | — | inherit |
|
--nbhd-action-gradient | — | rgb(from var(--nbhd-action-gradient-color) r g b / var(--nbhd-action-gradient-opacity)) |
|
--nbhd-action-gradient-color | --nbhd-action-primary-gradient-color | — | |
--nbhd-action-gradient-opacity | --nbhd-action-primary-gradient-opacity | 0.25 |
|
--nbhd-action-host-display | — | inline-block |
|
--nbhd-action-justifyContent | — | center |
|
--nbhd-action-margin | --nbhd-space-0 | 0px |
|
--nbhd-action-position | — | relative |
|
--nbhd-action-textDecoration | — | none |
|
--nbhd-action-transitionDuration | --nbhd-motion-duration-normal | 0.2s |
|
--nbhd-action-transitionFunction | --nbhd-motion-easing-inOut | ease-in-out |
|
--nbhd-action-transitionProperty | — | background-color, background-position, color, text-decoration |
|
--nbhd-action-userSelect | — | none |
|
--nbhd-action-whiteSpace | — | nowrap |
|
--nbhd-action-zIndex | --nbhd-z-auto | auto |
No action match.
Action primary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-primary-active-backgroundColor | --nbhd-color-action-primary-active-background | #1b5e20 |
|
--nbhd-action-primary-active-borderColor | --nbhd-color-action-primary-active-border | #1b5e20 |
|
--nbhd-action-primary-active-color | --nbhd-color-action-primary-active-foreground | #ffffff |
|
--nbhd-action-primary-backgroundColor | --nbhd-color-action-primary-background | #1b5e20 |
|
--nbhd-action-primary-backgroundImage | — | linear-gradient(to left, transparent, transparent 50%, var(--nbhd-action-gradient) 50%) |
|
--nbhd-action-primary-backgroundPosition | — | 110% 0 |
|
--nbhd-action-primary-backgroundRepeat | — | no-repeat |
|
--nbhd-action-primary-backgroundSize | — | 205% 100% |
|
--nbhd-action-primary-borderColor | --nbhd-color-action-primary-border | #1b5e20 |
|
--nbhd-action-primary-borderRadius | --nbhd-border-radius-sm | 2px |
|
--nbhd-action-primary-borderStyle | — | solid |
|
--nbhd-action-primary-bpMd-fontSize | --nbhd-typography-action-bpMd-fontSize | 0.6875rem |
|
--nbhd-action-primary-bpMd-lineHeight | --nbhd-action-primary-lineHeight | 1 |
|
--nbhd-action-primary-color | --nbhd-color-action-primary-foreground | #ffffff |
|
--nbhd-action-primary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-primary-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-primary-fontStyle | — | normal |
|
--nbhd-action-primary-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-primary-gradient-color | --nbhd-context-color-action-primary-interactive | Adapts to surface | |
--nbhd-action-primary-gradient-opacity | — | 0.25 |
|
--nbhd-action-primary-hover-backgroundColor | --nbhd-color-action-primary-hover-background | #1b5e20 |
|
--nbhd-action-primary-hover-backgroundPosition | — | 0 0 |
|
--nbhd-action-primary-hover-borderColor | --nbhd-color-action-primary-hover-border | #1b5e20 |
|
--nbhd-action-primary-hover-color | --nbhd-color-action-primary-hover-foreground | #ffffff |
|
--nbhd-action-primary-hover-letterSpacing | --nbhd-action-primary-letterSpacing | 2px |
|
--nbhd-action-primary-inlineSize | — | auto |
|
--nbhd-action-primary-letterSpacing | --nbhd-typography-action-letterSpacing | 2px |
|
--nbhd-action-primary-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-primary-paddingBlock | --nbhd-space-3 | 12px |
|
--nbhd-action-primary-paddingInline | --nbhd-space-9 | 36px |
|
--nbhd-action-primary-textTransform | — | uppercase |
No action primary match.
Action secondary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-secondary-active-backgroundColor | --nbhd-color-action-secondary-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-active-borderColor | --nbhd-color-action-secondary-active-border | #1b5e20 |
|
--nbhd-action-secondary-active-color | --nbhd-color-action-secondary-active-foreground | #ffffff |
|
--nbhd-action-secondary-backgroundColor | --nbhd-color-action-secondary-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-backgroundImage | — | linear-gradient(to left, transparent, transparent 50%, var(--nbhd-action-gradient) 50%) |
|
--nbhd-action-secondary-backgroundPosition | — | 110% 0 |
|
--nbhd-action-secondary-backgroundRepeat | — | no-repeat |
|
--nbhd-action-secondary-backgroundSize | — | 205% 100% |
|
--nbhd-action-secondary-borderColor | --nbhd-color-action-secondary-border | #1b5e20 |
|
--nbhd-action-secondary-borderRadius | --nbhd-border-radius-sm | 2px |
|
--nbhd-action-secondary-borderStyle | — | solid |
|
--nbhd-action-secondary-bpMd-fontSize | --nbhd-typography-action-bpMd-fontSize | 0.6875rem |
|
--nbhd-action-secondary-bpMd-lineHeight | --nbhd-action-primary-lineHeight | 1 |
|
--nbhd-action-secondary-color | --nbhd-color-action-secondary-foreground | #1b5e20 |
|
--nbhd-action-secondary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-secondary-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-secondary-fontStyle | — | normal |
|
--nbhd-action-secondary-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-secondary-gradient-opacity | — | 1 |
|
--nbhd-action-secondary-hover-backgroundColor | --nbhd-color-action-secondary-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-hover-backgroundPosition | — | 0 0 |
|
--nbhd-action-secondary-hover-borderColor | --nbhd-color-action-secondary-hover-border | #1b5e20 |
|
--nbhd-action-secondary-hover-color | --nbhd-color-action-secondary-hover-foreground | #ffffff |
|
--nbhd-action-secondary-hover-letterSpacing | --nbhd-action-secondary-letterSpacing | 2px |
|
--nbhd-action-secondary-inlineSize | — | auto |
|
--nbhd-action-secondary-letterSpacing | --nbhd-typography-action-letterSpacing | 2px |
|
--nbhd-action-secondary-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-secondary-paddingBlock | --nbhd-space-3 | 12px |
|
--nbhd-action-secondary-paddingInline | --nbhd-space-9 | 36px |
|
--nbhd-action-secondary-textTransform | — | uppercase |
No action secondary match.
Action tertiary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-tertiary-active-backgroundColor | --nbhd-color-action-tertiary-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-tertiary-active-color | --nbhd-color-action-tertiary-active-foreground | #1b5e20 |
|
--nbhd-action-tertiary-active-underline-color | --nbhd-color-action-tertiary-active-border | #1b5e20 |
|
--nbhd-action-tertiary-active-underline-height | — | 5px |
|
--nbhd-action-tertiary-backgroundColor | — | transparent |
|
--nbhd-action-tertiary-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-tertiary-color | --nbhd-color-action-tertiary-foreground | #1b5e20 |
|
--nbhd-action-tertiary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-tertiary-fontSize | --nbhd-typography-bodySmall-fontSize | 0.875rem |
|
--nbhd-action-tertiary-hover-backgroundColor | --nbhd-color-action-tertiary-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-tertiary-hover-color | --nbhd-color-action-tertiary-hover-foreground | #1b5e20 |
|
--nbhd-action-tertiary-hover-underline-color | --nbhd-color-action-tertiary-hover-border | #1b5e20 |
|
--nbhd-action-tertiary-hover-underline-height | — | 5px |
|
--nbhd-action-tertiary-letterSpacing | — | normal |
|
--nbhd-action-tertiary-paddingBlock | --nbhd-space-0 --nbhd-space-3 | 0px 12px |
|
--nbhd-action-tertiary-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-tertiary-transitionDuration | — | 0.1s |
|
--nbhd-action-tertiary-transitionFunction | — | Override only | |
--nbhd-action-tertiary-transitionProperty | — | all |
|
--nbhd-action-tertiary-underline-color | --nbhd-color-action-tertiary-border | #1b5e20 |
|
--nbhd-action-tertiary-underline-height | --nbhd-border-width-emphasis | 2px |
|
--nbhd-action-tertiary-underline-zIndex | --nbhd-z-below | -1 |
|
--nbhd-action-tertiary-zIndex | --nbhd-z-1 | 1 |
No action tertiary match.
Action plain
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-plain-active-backgroundColor | --nbhd-color-action-plain-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-active-borderColor | — | Override only | |
--nbhd-action-plain-active-color | --nbhd-color-action-plain-active-foreground | #1b5e20 |
|
--nbhd-action-plain-backgroundColor | --nbhd-color-action-plain-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-plain-color | --nbhd-color-action-plain-foreground | #1b5e20 |
|
--nbhd-action-plain-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-plain-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-plain-fontStyle | — | Override only | |
--nbhd-action-plain-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-plain-hover-backgroundColor | --nbhd-color-action-plain-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-hover-borderColor | — | Override only | |
--nbhd-action-plain-hover-color | --nbhd-color-action-plain-hover-foreground | #1b5e20 |
|
--nbhd-action-plain-letterSpacing | — | normal |
|
--nbhd-action-plain-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-plain-paddingBlock | --nbhd-space-0 --nbhd-space-3 | 0px 12px |
|
--nbhd-action-plain-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-plain-textTransform | — | none |
No action plain match.
Action unstyled
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-unstyled-backgroundColor | — | transparent |
|
--nbhd-action-unstyled-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-unstyled-color | --nbhd-color-text-primary | #1c1d1f |
|
--nbhd-action-unstyled-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-unstyled-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-unstyled-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-unstyled-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-unstyled-paddingInline | --nbhd-space-0 | 0px |
No action unstyled match.
Action link
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-link-active-backgroundColor | --nbhd-color-action-link-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-active-borderColor | — | Override only | |
--nbhd-action-link-active-color | --nbhd-color-action-link-active-foreground | #1b5e20 |
|
--nbhd-action-link-backgroundColor | --nbhd-color-action-link-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-link-color | --nbhd-color-action-link-foreground | #1b5e20 |
|
--nbhd-action-link-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-link-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-link-fontStyle | — | normal |
|
--nbhd-action-link-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-link-hover-backgroundColor | --nbhd-color-action-link-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-hover-borderColor | — | Override only | |
--nbhd-action-link-hover-color | --nbhd-color-action-link-hover-foreground | #1b5e20 |
|
--nbhd-action-link-letterSpacing | — | normal |
|
--nbhd-action-link-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-link-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-link-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-link-textDecoration | — | underline |
|
--nbhd-action-link-textTransform | — | none |
No action link match.
Action icon only
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-iconOnly-blockSize | --nbhd-size-control-md | 32px |
|
--nbhd-action-iconOnly-borderRadius | --nbhd-border-radius-full | 9999px |
|
--nbhd-action-iconOnly-inlineSize | --nbhd-size-control-md | 32px |
|
--nbhd-action-iconOnly-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-iconOnly-paddingInline | --nbhd-space-0 | 0px |