Text
ready
Text component for rendering various text styles and HTML tags.
Loading
Code
HTML
import { NbhdText } from '@fbin-web/neighborhood-core';<nbhd-text>Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text>React
import { NbhdText } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdText>Maecenas sed diam eget risus varius blandit sit amet non magna.</NbhdText>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
tag
|
tag
|
p | div | span | h1 | h2 | h3 | h4 | h5 | h6
|
p
|
HTML tag that will be rendered for the text element. |
variant
|
variant
|
default | eyebrow | title | subtitle | note
|
default
|
Text styling variant that applies predefined visual styles. |
alignment
|
alignment
|
inherit | left | center | right
|
inherit
|
Text alignment within the container. Inherit uses parent alignment. |
italic
|
italic
|
boolean
|
false
|
Applies italic styling to the text. |
cssClass
|
css-class
|
string
|
Additional CSS class name to apply to the text element. | |
dark
|
dark
|
boolean
|
false
|
Applies dark theme styling suitable for dark backgrounds. |
Slots
| Name | Description |
|---|---|
| (default) | Content area. |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
CSS Properties
Styling properties for the for the default variant
| Property | Default Value |
|---|---|
--nbhd-text-borderColor-lightTheme
|
transparent |
--nbhd-text-borderColor-darkTheme
|
transparent |
--nbhd-text-borderRadius
|
0 |
--nbhd-text-borderStyle
|
none |
--nbhd-text-borderWidth
|
0 |
--nbhd-text-color-lightTheme
|
inherit |
--nbhd-text-color-darkTheme
|
var(--nbhd-dark-foreground, var(--nbhd-color-white)) |
--nbhd-text-fontFamily
|
inherit |
--nbhd-text-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-fontStyle
|
inherit |
--nbhd-text-fontWeight
|
inherit |
--nbhd-text-inlineSize
|
auto |
--nbhd-text-letterSpacing
|
inherit |
--nbhd-text-lineHeight
|
normal |
--nbhd-text-marginBlock
|
var(--nbhd-space-0, 0) var(--nbhd-space-7, 28px) |
--nbhd-text-maxInlineSize
|
100% |
--nbhd-text-paddingBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-text-textAlign
|
inherit |
--nbhd-text-textTransform
|
inherit |
--nbhd-text-fontSize-bpMd
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-marginBlock-bpMd
|
var(--nbhd-space-0, 0) var(--nbhd-space-7, 28px) |
--nbhd-text-fontSize-bpLg
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-marginBlock-bpLg
|
var(--nbhd-space-0, 0) var(--nbhd-space-7, 28px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.
Eyebrow
Styling properties for the for the Eyebrow variant
| Property | Default Value |
|---|---|
--nbhd-text-eyebrow-color-lightTheme
|
inherit |
--nbhd-text-eyebrow-color-darkTheme
|
var(--nbhd-dark-foreground, var(--nbhd-color-white)) |
--nbhd-text-eyebrow-display
|
block |
--nbhd-text-eyebrow-fontFamily
|
inherit |
--nbhd-text-eyebrow-fontSize
|
var(--nbhd-fontSize-xs, 13px) |
--nbhd-text-eyebrow-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-text-eyebrow-letterSpacing
|
inherit |
--nbhd-text-eyebrow-lineHeight
|
var(--nbhd-line-height-1-4, 1.4) |
--nbhd-text-eyebrow-marginBlock
|
var(--nbhd-space-0, 0) var(--nbhd-space-2, 8px) |
--nbhd-text-eyebrow-paddingBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-eyebrow-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-text-eyebrow-textAlign
|
inherit |
--nbhd-text-eyebrow-textTransform
|
inherit |
--nbhd-text-eyebrow-fontSize-bpMd
|
var(--nbhd-fontSize-xs, 13px) |
--nbhd-text-eyebrow-marginBlock-bpMd
|
var(--nbhd-space-0, 0) var(--nbhd-space-2, 8px) |
--nbhd-text-eyebrow-fontSize-bpLg
|
var(--nbhd-fontSize-xs, 13px) |
--nbhd-text-eyebrow-marginBlock-bpLg
|
var(--nbhd-space-0, 0) var(--nbhd-space-2, 8px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.
Title
Styling properties for the for the Title variant
| Property | Default Value |
|---|---|
--nbhd-text-title-color-lightTheme
|
var(--nbhd-color-black) |
--nbhd-text-title-color-darkTheme
|
var(--nbhd-dark-foreground, var(--nbhd-color-white)) |
--nbhd-text-title-display
|
block |
--nbhd-text-title-fontFamily
|
var(--nbhd-fontFamily-heading, inherit) |
--nbhd-text-title-fontSize
|
var(--nbhd-fontSize-xl, 24px) |
--nbhd-text-title-fontStyle
|
inherit |
--nbhd-text-title-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-text-title-letterSpacing
|
inherit |
--nbhd-text-title-lineHeight
|
var(--nbhd-lineHeight-1-2, 1.2) |
--nbhd-text-title-marginBlock
|
var(--nbhd-space-0, 0) var(--nbhd-space-3, 12px) |
--nbhd-text-title-paddingBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-title-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-text-title-textAlign
|
inherit |
--nbhd-text-title-textTransform
|
inherit |
--nbhd-text-title-fontSize-bpMd
|
var(--nbhd-fontSize-xl, 24px) |
--nbhd-text-title-marginBlock-bpMd
|
var(--nbhd-space-0, 0) var(--nbhd-space-3, 12px) |
--nbhd-text-title-fontSize-bpLg
|
var(--nbhd-fontSize-xxxl, 34px) |
--nbhd-text-title-marginBlock-bpLg
|
var(--nbhd-space-0, 0) var(--nbhd-space-5, 20px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.
Subtitle
Styling properties for the for the Subtitle variant
| Property | Default Value |
|---|---|
--nbhd-text-subtitle-color-lightTheme
|
var(--nbhd-color-fbinNavy, var(--nbhd-color-black)) |
--nbhd-text-subtitle-color-darkTheme
|
var(--nbhd-dark-foreground, var(--nbhd-color-white)) |
--nbhd-text-subtitle-display
|
block |
--nbhd-text-subtitle-fontFamily
|
var(--nbhd-fontFamily-heading, inherit) |
--nbhd-text-subtitle-fontSize
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-text-subtitle-fontStyle
|
inherit |
--nbhd-text-subtitle-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-text-subtitle-letterSpacing
|
inherit |
--nbhd-text-subtitle-lineHeight
|
var(--nbhd-lineHeight-1-3, 1.3) |
--nbhd-text-subtitle-marginBlock
|
var(--nbhd-space-0, 0) var(--nbhd-space-3, 12px) |
--nbhd-text-subtitle-paddingBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-subtitle-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-text-subtitle-textAlign
|
inherit |
--nbhd-text-subtitle-textTransform
|
inherit |
--nbhd-text-subtitle-fontSize-bpMd
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-text-subtitle-marginBlock-bpMd
|
var(--nbhd-space-0, 0) var(--nbhd-space-3, 12px) |
--nbhd-text-subtitle-fontSize-bpLg
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-text-subtitle-marginBlock-bpLg
|
var(--nbhd-space-0, 0) var(--nbhd-space-3, 12px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.
Note
Styling properties for the for the Note variant
| Property | Default Value |
|---|---|
--nbhd-text-note-color-lightTheme
|
inherit |
--nbhd-text-note-color-darkTheme
|
var(--nbhd-dark-foreground, var(--nbhd-color-white)) |
--nbhd-text-note-display
|
block |
--nbhd-text-note-fontFamily
|
inherit |
--nbhd-text-note-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-note-fontStyle
|
inherit |
--nbhd-text-note-fontWeight
|
var(--nbhd-fontWeight-500, 500) |
--nbhd-text-note-letterSpacing
|
inherit |
--nbhd-text-note-lineHeight
|
normal |
--nbhd-text-note-marginBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-note-paddingBlock
|
var(--nbhd-space-0, 0) |
--nbhd-text-note-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-text-note-textAlign
|
inherit |
--nbhd-text-note-textTransform
|
inherit |
--nbhd-text-note-fontSize-bpMd
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-note-marginBlock-bpMd
|
var(--nbhd-space-0, 0) |
--nbhd-text-note-fontSize-bpLg
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-text-note-marginBlock-bpLg
|
var(--nbhd-space-0, 0) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.