List
ReadyA simple list component.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdList } from '@fbin-web/neighborhood-core';
Usage
<nbhd-list>
<nbhd-text
variant="subtitle"
tag="h4"
slot="title">
Category
</nbhd-text>
<nbhd-link
class="list-item--link"
slot="item"
href="/link1">
Link 1
</nbhd-link>
<nbhd-text
class="list-item--text"
tag="div"
slot="item">
Link 2
</nbhd-text>
<nbhd-link
class="list-item--link"
slot="item"
href="/link3">
Link 3
</nbhd-link>
</nbhd-list>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdList } from '@fbin-web/neighborhood-react';
Usage
import { NbhdList, NbhdText, NbhdLink } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdList>
<NbhdText
variant="subtitle"
tag="h4"
slot="title">
Category
</NbhdText>
<NbhdLink
className="list-item--link"
slot="item"
href="/link1">
Link 1
</NbhdLink>
<NbhdText
className="list-item--text"
tag="div"
slot="item">
Link 2
</NbhdText>
<NbhdLink
className="list-item--link"
slot="item"
href="/link3">
Link 3
</NbhdLink>
</NbhdList>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
divider | divider | boolean | false | Adds a divider border at the bottom of the list and reflects to attribute. |
Slots
Available slots for customizing list content:
| Name | Description |
|---|---|
title | Optional title content rendered above the list items. |
item | List items. Each slotted item gets role="listitem" unless it already has a role. |
CSS Parts
CSS parts that can be styled using the ::part() selector:
| Name | Description |
|---|---|
base | The outer container for the complete list structure. |
title | The rendered title slot element when a title is provided. |
items | The wrapper around the list item slot content. |
list-item | The list item slot element for each item rendered in the list. |
nbhd-list::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-list 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 | Copy |
|---|---|---|---|
--nbhd-list-borderBottomColor | --nbhd-context-color-interactive-default | Adapts to surface | |
--nbhd-list-borderBottomStyle | — | solid |
|
--nbhd-list-borderBottomWidth | --nbhd-border-width-none | 0 |
|
--nbhd-list-display | — | block |
|
--nbhd-list-divider | --nbhd-border-width-subtle | 1px |
|
--nbhd-list-host-display | — | block |
|
--nbhd-list-item-display | — | block |
|
--nbhd-list-item-marginBlock | --nbhd-space-0 --nbhd-space-1 | 0px 4px |
|
--nbhd-list-item-textAlign | — | start |
|
--nbhd-list-items-marginBlock | --nbhd-space-0 | 0px |
|
--nbhd-list-items-paddingBlock | --nbhd-space-0 --nbhd-space-2 | 0px 8px |
|
--nbhd-list-marginBlock | --nbhd-space-0 --nbhd-space-4 | 0px 16px |
|
--nbhd-list-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-list-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-list-title-marginBlock | --nbhd-space-1 | 4px |
|
--nbhd-list-title-textTransform | — | uppercase |
No list match.