List
ready

A simple list component.

Selected Brand

Code

HTML

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

<nbhd-list>
  <nbhd-text variant="heading" alignment="left" tag="h4" weight="light" 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" alignment="left" tag="div" slot="item">
    Link 2
  </nbhd-text>

  <nbhd-link class="list-item--link" slot="item" href="/link3">
    Link 3
  </nbhd-link>
</nbhd-list>

React

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

const App = () => (
  <>
    <NbhdList>
      <NbhdText
        variant="heading"
        alignment="left"
        tag="h4"
        weight="light"
        slot="title">
        Category
      </NbhdText>

      <NbhdLink
        class="list-item--link"
        slot="item"
        href="/link1">
        Link 1
      </NbhdLink>

      <NbhdText
        className="list-item--text"
        alignment="left"
        tag="div"
        slot="item">
        Link 2
      </NbhdText>

      <NbhdLink
        class="list-item--link"
        slot="item"
        href="/link3">
        Link 3
      </NbhdLink>
    </NbhdList>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`noDivider`	`no-divider`	`boolean`	`false`	Removes the divider border at the bottom of the list and reflects to attribute.
`dark`	`dark`	`boolean`	`false`	Enable dark theme styling and reflects to attribute.

Slots

Available slots for customizing list content:

Name	Description
`title`	Optional title content that appears at the top of the list.
`item`	Individual list item content. Use multiple elements with this slot to create list items.

CSS Parts

CSS parts that can be styled using the ::part() selector:

Name	Description
`base`	The main `<div>` wrapper element for the entire list.
`title`	The title slot container that appears at the top of the list.
`items`	The container `<div>` that wraps all list items.
`list-item`	The item slot container for individual list item content.

CSS Properties

CSS custom properties that can be used to customize the list appearance and layout:

Property	Default Value
`--nbhd-list-display`	block
`--nbhd-list-marginBlock`	var(--nbhd-space-0, 0) var(--nbhd-space-4, 16px)
`--nbhd-list-paddingBlock`	var(--nbhd-space-0, 0)
`--nbhd-list-paddingInline`	var(--nbhd-space-0, 0)
`--nbhd-list-borderBottomWidth`	1px
`--nbhd-list-borderBottomStyle`	solid
`--nbhd-list-borderBottomColor`	var(--nbhd-color-border-primary, #ccc)
`--nbhd-list-borderBottomColor-dark`	var(--nbhd-color-border-primary-dark, #666)
`--nbhd-listTitle-fontSize`	var(--nbhd-fontSize-regular, 1rem)
`--nbhd-listTitle-fontWeight`	var(--nbhd-fontWeight-500, 500)
`--nbhd-listTitle-textTransform`	uppercase
`--nbhd-listTitle-marginBlock`	var(--nbhd-space-1, 4px)
`--nbhd-listTitle-color`	var(--nbhd-color-text-primary)
`--nbhd-listItems-display`	block
`--nbhd-listItems-marginBlock`	var(--nbhd-space-0, 0)
`--nbhd-listItems-paddingBlock`	var(--nbhd-space-0, 0) var(--nbhd-space-2, 8px)
`--nbhd-listItem-host-display`	block
`--nbhd-listItem-display`	block
`--nbhd-listItem-fontSize`	var(--nbhd-fontSize-xs, 13px)
`--nbhd-listItem-fontWeight`	var(--nbhd-fontWeight-800, 800)
`--nbhd-listItem-textAlign`	start
`--nbhd-listItem-marginBlock`	var(--nbhd-space-1, 4px)
`--nbhd-listItem-color`	var(--nbhd-color-text-primary)

List ready