Link
draft
Call to Action feature on a component that links to another page or section.
<a class="nbhd-link nbhd-button" href="/some-link-url" aria-label="Nibh Ipsum Fermentum Cursus">Condimentum Pellentesque</a>Primary
<a class="nbhd-link nbhd-button nbhd-button-primary" href="/some-link-url" aria-label="Additional context for button">Primary CTA</a>Secondary
<a class="nbhd-link nbhd-button nbhd-button-secondary" href="/some-link-url" aria-label="Additional context for button">Secondary CTA</a>Underlined
<a class="nbhd-link nbhd-button nbhd-button-underlined" href="/some-link-url" aria-label="Additional context for button">Underlined CTA</a>Element Properties
| Name | Type | Default | Description |
|---|---|---|---|
| label |
string
|
Content for text displayed. | |
| url |
string
|
URL that will be used for href.
|
|
| cssClass |
string
|
Additional CSS class(es). | |
| ariaLabel |
string
|
Content for additional context. | |
| newWindow |
boolean
|
false
|
Set the target to _blank
|
CSS Properties
The following CSS Properties are available to update styling when provided with componentRenovation.
It is ideal to use the default component styling and only leverage the componentRenovation feature in extreme cases.
Refer to the Component Renovation guidelines on how to use.
Remember...with great power, comes great responsibility!
| Property | Description |
|---|---|
--nbhd-button-background-color
|
Controls the background color. |
--nbhd-button-background-color-hover
|
Controls the background color for hover state. |
--nbhd-button-background-position
|
Controls the background position. |
--nbhd-button-background-size
|
Controls the background size. |
--nbhd-button-border-color
|
Controls the border color. |
--nbhd-button-border-radius
|
Controls the border radius |
--nbhd-button-border-style
|
Controls the border style. |
--nbhd-button-border-width
|
Controls the border width. |
--nbhd-button-cursor
|
Controls the cursor. |
--nbhd-button-display
|
Controls the display. |
--nbhd-button-font-size
|
Controls the font size. |
--nbhd-button-font-stack
|
Controls the font family. |
--nbhd-button-font-style
|
Controls the font style. |
--nbhd-button-font-weight
|
Controls the font weight. |
--nbhd-button-letter-spacing
|
Control the letter spacing. |
--nbhd-button-padding-block
|
Controls the block padding. |
--nbhd-button-padding-inline
|
Controls the inline padding. |
--nbhd-button-text-align
|
Controls the text alignment. |
--nbhd-button-text-color
|
Controls the text color. |
--nbhd-button-text-color-hover
|
Controls the text color for hover state. |
--nbhd-button-text-decoration
|
Controls the text decoration. |
--nbhd-button-text-transform
|
Controls the text transform. |
--nbhd-button-transition-function
|
Controls the transition function. Example ease or ease-in-out.
|
--nbhd-button-transition-duration
|
Controls the transition duration length. |
--nbhd-button-transition-property
|
Controls the properties used for transition effect. |
CSS Properties for Primary
| Property | Description |
|---|---|
--nbhd-button-primary-background-color
|
Controls the background color for the primary button. |
--nbhd-button-primary-background-color-hover
|
Controls the background color for the primary button hover state. |
--nbhd-button-primary-border-color
|
Controls the border color for primary button. |
-nbhd-button-primary-text-color
|
Controls the text color for the primary button. |
--nbhd-button-primary-text-color-hover
|
Controls the text color for primary button hover state. |
CSS Properties for Secondary
| Property | Description |
|---|---|
--nbhd-button-secondary-background-color
|
Controls the background color for the secondary button. |
--nbhd-button-secondary-background-color-hover
|
Controls the background color for the secondary button hover state. |
--nbhd-button-secondary-border-color
|
Controls the border color for secondary button. |
-nbhd-button-secondary-text-color
|
Controls the text color for the secondary button. |
--nbhd-button-secondary-text-color-hover
|
Controls the text color for secondary button hover state. |