List
ready

A simple list component.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdList } from '@fbin-web/neighborhood-core';
<nbhd-list>
  <nbhd-text
    variant="heading"
    alignment="left"
    tag="h4"
    theme="light"
    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"
    theme="light"
    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"
        theme="light"
        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"
        theme="light"
        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.

Slots

Name Description
list-item List item.
list-title List title.

CSS Properties

Property Default Value
--nbhd-list-borderBottomWidth 1px
--nbhd-list-borderBottomStyle solid
--nbhd-list-borderBottomColor var(--nbhd-list-borderBottomColor-lightTheme, #ccc)
--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-listItem-host-display block
--nbhd-listTitle-fontSize var(--nbhd-fontSize-regular, 1rem)
--nbhd-listTitle-fontWeight var(--nbhd-fontWeight-500, 500)
--nbhd-listTitle-marginBlock var(--nbhd-space-1, 4px)
--nbhd-listTitle-textTransform uppercase
--nbhd-listItems-paddingBlock var(--nbhd-space-0, 0) var(--nbhd-space-2, 8px)
--nbhd-listItems-marginBlock var(--nbhd-space-0, 0)
--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-marginBlock var(--nbhd-space-1, 4px)
--nbhd-listItem-textAlign start