List
ready

A simple list component.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdList } from '@fbin-web/neighborhood-core';
<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>

React 

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 item content. Add one or more elements to this slot to render each item.

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.