Text

Ready

Text component for rendering various text styles and HTML tags.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdText } from '@fbin-web/neighborhood-core';

Usage

<nbhd-text>Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdText } from '@fbin-web/neighborhood-react';

Usage

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`	`pspandivh1h2h3h4h5h6`	`p`	HTML tag that will be rendered for the text element.
`variant`	`variant`	`defaultbodyeyebrowtitlesubtitlesupporting`	`body`	Text styling variant that applies predefined visual styles.
`cssClass`	`css-class`	`string`	—	Additional CSS class name to apply to the text element.

Slots

Name	Description
`(default)`	Content area.

CSS Parts

Name	Description
`base`	The component's base wrapper.

nbhd-text::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-text 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.

Property	Token	Value
`--nbhd-text-borderColor`	—	`transparent`
`--nbhd-text-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-text-borderStyle`	—	`none`
`--nbhd-text-borderWidth`	`--nbhd-border-width-none`	`0`
`--nbhd-text-color`	`--nbhd-context-color-text-primary`	Adapts to surface
`--nbhd-text-display`	—	`block`
`--nbhd-text-eyebrow-bpLg-fontSize`	`--nbhd-text-eyebrow-bpMd-fontSize`	`0.8125rem`
`--nbhd-text-eyebrow-bpLg-marginBlock`	`--nbhd-text-eyebrow-bpMd-marginBlock`	`0px 8px`
`--nbhd-text-eyebrow-bpMd-fontSize`	`--nbhd-text-eyebrow-fontSize`	`0.8125rem`
`--nbhd-text-eyebrow-bpMd-marginBlock`	`--nbhd-text-eyebrow-marginBlock`	`0px 8px`
`--nbhd-text-eyebrow-color`	`--nbhd-context-color-text-secondary`	Adapts to surface
`--nbhd-text-eyebrow-display`	`--nbhd-text-display`	`block`
`--nbhd-text-eyebrow-fontFamily`	`--nbhd-typography-eyebrow-fontFamily`	`sans-serif`
`--nbhd-text-eyebrow-fontSize`	`--nbhd-typography-eyebrow-fontSize`	`0.8125rem`
`--nbhd-text-eyebrow-fontStyle`	`--nbhd-text-fontStyle`	`inherit`
`--nbhd-text-eyebrow-fontWeight`	`--nbhd-typography-eyebrow-fontWeight`	`700`
`--nbhd-text-eyebrow-letterSpacing`	`--nbhd-typography-eyebrow-letterSpacing`	`5px`
`--nbhd-text-eyebrow-lineHeight`	`--nbhd-typography-eyebrow-lineHeight`	`1.4`
`--nbhd-text-eyebrow-marginBlock`	`--nbhd-space-0 --nbhd-space-2`	`0px 8px`
`--nbhd-text-eyebrow-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-eyebrow-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-eyebrow-textAlign`	`--nbhd-text-textAlign`	`inherit`
`--nbhd-text-eyebrow-textTransform`	`--nbhd-text-textTransform`	`inherit`
`--nbhd-text-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-text-fontSize`	`--nbhd-typography-body-fontSize`	`1rem`
`--nbhd-text-fontStyle`	—	`inherit`
`--nbhd-text-fontWeight`	—	`inherit`
`--nbhd-text-host-display`	—	`block`
`--nbhd-text-inlineSize`	—	`auto`
`--nbhd-text-letterSpacing`	—	`inherit`
`--nbhd-text-lineHeight`	`--nbhd-typography-body-lineHeight`	`1.5`
`--nbhd-text-marginBlock`	`--nbhd-space-0 --nbhd-space-7`	`0px 28px`
`--nbhd-text-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-maxInlineSize`	—	`100%`
`--nbhd-text-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-span-display`	—	`inline`
`--nbhd-text-span-host-display`	—	`inline`
`--nbhd-text-span-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-subtitle-bpLg-fontSize`	`--nbhd-text-subtitle-bpMd-fontSize`	`1.125rem`
`--nbhd-text-subtitle-bpLg-marginBlock`	`--nbhd-text-subtitle-bpMd-marginBlock`	`0px 12px`
`--nbhd-text-subtitle-bpMd-fontSize`	`--nbhd-text-subtitle-fontSize`	`1.125rem`
`--nbhd-text-subtitle-bpMd-marginBlock`	`--nbhd-text-subtitle-marginBlock`	`0px 12px`
`--nbhd-text-subtitle-color`	`--nbhd-context-color-text-secondary`	Adapts to surface
`--nbhd-text-subtitle-display`	`--nbhd-text-display`	`block`
`--nbhd-text-subtitle-fontFamily`	`--nbhd-typography-subheading-fontFamily`	`sans-serif`
`--nbhd-text-subtitle-fontSize`	`--nbhd-typography-subheading-fontSize`	`1.125rem`
`--nbhd-text-subtitle-fontStyle`	`--nbhd-text-fontStyle`	`inherit`
`--nbhd-text-subtitle-fontWeight`	`--nbhd-typography-subheading-fontWeight`	`700`
`--nbhd-text-subtitle-letterSpacing`	`--nbhd-text-letterSpacing`	`inherit`
`--nbhd-text-subtitle-lineHeight`	`--nbhd-typography-subheading-lineHeight`	`1.3`
`--nbhd-text-subtitle-marginBlock`	`--nbhd-space-0 --nbhd-space-3`	`0px 12px`
`--nbhd-text-subtitle-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-subtitle-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-subtitle-textAlign`	`--nbhd-text-textAlign`	`inherit`
`--nbhd-text-subtitle-textTransform`	`--nbhd-text-textTransform`	`inherit`
`--nbhd-text-supporting-color`	`--nbhd-context-color-text-secondary`	Adapts to surface
`--nbhd-text-supporting-display`	`--nbhd-text-display`	`block`
`--nbhd-text-supporting-fontFamily`	`--nbhd-typography-supporting-fontFamily`	`sans-serif`
`--nbhd-text-supporting-fontSize`	`--nbhd-typography-supporting-fontSize`	`0.8125rem`
`--nbhd-text-supporting-fontStyle`	`--nbhd-text-fontStyle`	`inherit`
`--nbhd-text-supporting-fontWeight`	`--nbhd-typography-supporting-fontWeight`	`400`
`--nbhd-text-supporting-letterSpacing`	`--nbhd-text-letterSpacing`	`inherit`
`--nbhd-text-supporting-lineHeight`	`--nbhd-typography-supporting-lineHeight`	`1`
`--nbhd-text-supporting-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-supporting-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-supporting-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-supporting-textAlign`	`--nbhd-text-textAlign`	`inherit`
`--nbhd-text-supporting-textTransform`	`--nbhd-text-textTransform`	`inherit`
`--nbhd-text-textAlign`	—	`inherit`
`--nbhd-text-textTransform`	—	`inherit`
`--nbhd-text-title-bpLg-fontSize`	`--nbhd-typography-headline-bpLg-fontSize`	`2.125rem`
`--nbhd-text-title-bpLg-marginBlock`	`--nbhd-space-0 --nbhd-space-5`	`0px 20px`
`--nbhd-text-title-bpMd-fontSize`	`--nbhd-text-title-fontSize`	`1.5rem`
`--nbhd-text-title-bpMd-marginBlock`	`--nbhd-text-title-marginBlock`	`0px 12px`
`--nbhd-text-title-color`	`--nbhd-context-color-text-primary`	Adapts to surface
`--nbhd-text-title-display`	`--nbhd-text-display`	`block`
`--nbhd-text-title-fontFamily`	`--nbhd-typography-headline-fontFamily`	`sans-serif`
`--nbhd-text-title-fontSize`	`--nbhd-typography-headline-fontSize`	`1.5rem`
`--nbhd-text-title-fontStyle`	`--nbhd-text-fontStyle`	`inherit`
`--nbhd-text-title-fontWeight`	`--nbhd-typography-headline-fontWeight`	`700`
`--nbhd-text-title-letterSpacing`	`--nbhd-text-letterSpacing`	`inherit`
`--nbhd-text-title-lineHeight`	`--nbhd-typography-headline-lineHeight`	`1.2`
`--nbhd-text-title-marginBlock`	`--nbhd-space-0 --nbhd-space-3`	`0px 12px`
`--nbhd-text-title-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-text-title-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-text-title-textAlign`	`--nbhd-text-textAlign`	`inherit`
`--nbhd-text-title-textTransform`	`--nbhd-text-textTransform`	`inherit`

Dependencies

Used by

AutosuggestReady <nbhd-autosuggest> BreadcrumbReady <nbhd-breadcrumb> CardReady <nbhd-card> Card ListReady <nbhd-card-list> CheckboxReady <nbhd-checkbox> DialogDraft <nbhd-dialog> FiltersReady <nbhd-filters> Headline ContentReady <nbhd-headline-content> Hero SplitReady <nbhd-hero-split> HumongotronReady <nbhd-humongotron> InputReady <nbhd-input> JumbotronReady <nbhd-jumbotron> MinitronReady <nbhd-minitron> NavbarReady <nbhd-navbar> PaginationReady <nbhd-pagination> Pagination SearchReady <nbhd-pagination-search> Product CardReady <nbhd-product-card> RadioReady <nbhd-radio> Radio GroupReady <nbhd-radio-group> RangeReady <nbhd-range> SelectReady <nbhd-select> TextareaReady <nbhd-textarea> UploadDraft <nbhd-upload> Video PlayerReady <nbhd-video-player>