VaneUI

VaneUI

Typography Components

List

A container for displaying a series of related items in an ordered or unordered fashion. It provides consistent styling for list elements.

Basic List

An unordered list with bullet points.

  • First item in the list
  • Second item in the list
  • Third item in the list
react-icon

BasicList.tsx

<List>
  <ListItem>First item in the list</ListItem>
  <ListItem>Second item in the list</ListItem>
  <ListItem>Third item in the list</ListItem>
</List>

List Style Types

Use disc for bullets (default) or decimal for numbered lists.

Unordered (disc)

  • Bullet point one
  • Bullet point two
  • Bullet point three

Ordered (decimal)

  1. Step one
  2. Step two
  3. Step three
react-icon

ListStyleTypes.tsx

<Col gap>
  <div>
    <Text semibold>Unordered (disc)</Text>
    <List disc>
      <ListItem>Bullet point one</ListItem>
      <ListItem>Bullet point two</ListItem>
      <ListItem>Bullet point three</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>Ordered (decimal)</Text>
    <List decimal>
      <ListItem>Step one</ListItem>
      <ListItem>Step two</ListItem>
      <ListItem>Step three</ListItem>
    </List>
  </div>
</Col>

List Sizes

Lists come in different sizes: xs, sm, md (default), lg, xl.

  • Small list item
  • Another small item
  • Large list item
  • Another large item
react-icon

ListSizes.tsx

<Col gap>
  <List sm>
    <ListItem>Small list item</ListItem>
    <ListItem>Another small item</ListItem>
  </List>
  <List lg>
    <ListItem>Large list item</ListItem>
    <ListItem>Another large item</ListItem>
  </List>
</Col>

List Appearances

Lists support color appearances: primary, secondary, success, danger, etc.

  • Primary colored item
  • Another primary item
  • Success colored item
  • Another success item
  • Danger colored item
  • Another danger item
react-icon

ListAppearances.tsx

<Col gap>
  <List primary>
    <ListItem>Primary colored item</ListItem>
    <ListItem>Another primary item</ListItem>
  </List>
  <List success>
    <ListItem>Success colored item</ListItem>
    <ListItem>Another success item</ListItem>
  </List>
  <List danger>
    <ListItem>Danger colored item</ListItem>
    <ListItem>Another danger item</ListItem>
  </List>
</Col>

Nested Lists

Lists can be nested for hierarchical content.

  • Parent item one
    • Nested child item
    • Another nested item
  • Parent item two
    1. Numbered nested item
    2. Another numbered item
  • Parent item three
react-icon

NestedLists.tsx

<List>
  <ListItem>
    Parent item one
    <List>
      <ListItem>Nested child item</ListItem>
      <ListItem>Another nested item</ListItem>
    </List>
  </ListItem>
  <ListItem>
    Parent item two
    <List decimal>
      <ListItem>Numbered nested item</ListItem>
      <ListItem>Another numbered item</ListItem>
    </List>
  </ListItem>
  <ListItem>Parent item three</ListItem>
</List>

List Styling

Combine font properties like bold, italic, mono with lists.

  • Bold list items
  • Another bold item
  • code --install extension
  • npm run build
react-icon

ListStyling.tsx

<Col gap>
  <List semibold>
    <ListItem>Bold list items</ListItem>
    <ListItem>Another bold item</ListItem>
  </List>
  <List mono>
    <ListItem>code --install extension</ListItem>
    <ListItem>npm run build</ListItem>
  </List>
</Col>

List Props

Font Weight

Font weight props for controlling text weight

thin

Thin font weight (100)

extralight

Extra light font weight (200)

light

Light font weight (300)

normal

Normal font weight (400)

medium

Medium font weight (500)

semibold

Semibold font weight (600)

bold

Bold font weight (700)

extrabold

Extra bold font weight (800)

black

Black font weight (900)

Font Style

Font style props for controlling text style

italic

Italic font style

notItalic

Not italic (normal) font style

Text Decoration

Text decoration props for controlling text underline/strikethrough

underline

Add underline decoration below text

lineThrough

Add strikethrough/line-through decoration across text

noUnderline

Remove text decoration (no underline, strikethrough, etc.)

overline

Add overline decoration above text

Text Transform

Text transform props for controlling text case

uppercase

Transform text to uppercase

lowercase

Transform text to lowercase

capitalize

Capitalize first letter of each word

normalCase

Normal text case (no transformation)

Font Family

Font family props for controlling text font

sans

Sans-serif font family (default)

serif

Serif font family

mono

Monospace font family

Text Align

Text alignment props for controlling text position

textLeft

Align text to left

textCenter

Align text to center

textRight

Align text to right

textJustify

Justify text

List Style

List style props for controlling list markers

disc

Bullet point list style

decimal

Numbered list style

Controlled themes:

  • listStyle

    • Size

    Size props for controlling component dimensions

    xs

    Extra small size

    sm

    Small size

    md

    Medium size (default)

    lg

    Large size

    xl

    Extra large size

    Hide

    Hide props for responsive element visibility

    mobileHide

    Hide element on mobile devices and below (max-mobile: 48rem)

    tabletHide

    Hide element on tablet devices and below (max-tablet: 64rem)

    desktopHide

    Hide element on desktop devices and below (max-desktop: 80rem)

    Items

    Items props for controlling flex item alignment (align-items)

    itemsStart

    Align items to start (top/left)

    itemsEnd

    Align items to end (bottom/right)

    itemsCenter

    Align items to center

    itemsBaseline

    Align items to baseline

    itemsStretch

    Stretch items to fill container

    Justify

    Justify props for controlling flex content alignment (justify-content)

    justifyStart

    Pack items toward the start of the main axis

    justifyEnd

    Pack items toward the end of the main axis

    justifyCenter

    Center items along the main axis

    justifyBetween

    Distribute items with space between them

    justifyAround

    Distribute items with space around them

    justifyEvenly

    Distribute items with equal space around them

    justifyStretch

    Stretch items to fill the main axis

    justifyBaseline

    Align items along their baseline on main axis

    Position

    Position props for controlling CSS position property

    relative

    Relative positioning

    absolute

    Absolute positioning

    fixed

    Fixed positioning

    sticky

    Sticky positioning

    static

    Static positioning

    Display

    Display props for controlling CSS display property

    inline

    Inline display - flows with text

    block

    Block display - takes full width, new line

    inlineBlock

    Inline-block display - inline but with block properties

    flex

    Flex display - flexbox container

    inlineFlex

    Inline-flex display - inline flexbox container

    grid

    Grid display - CSS grid container

    inlineGrid

    Inline-grid display - inline grid container

    contents

    Contents display - element's box is removed, children display as if parent didn't exist

    table

    Table display - behaves like table element

    tableCell

    Table-cell display - behaves like td element

    hidden

    Hidden display - element is not visible

    Overflow

    Overflow props for controlling content overflow behavior

    overflowAuto

    Auto overflow - show scrollbars if needed

    overflowHidden

    Hidden overflow - clip content without scrollbars

    overflowClip

    Clip overflow - hard clip without scrollbars

    overflowVisible

    Visible overflow - content extends beyond bounds

    overflowScroll

    Scroll overflow - always show scrollbars

    overflowXAuto

    Auto overflow on X-axis only

    overflowYAuto

    Auto overflow on Y-axis only

    overflowXHidden

    Hidden overflow on X-axis only

    overflowYHidden

    Hidden overflow on Y-axis only

    overflowXClip

    Clip overflow on X-axis only

    overflowYClip

    Clip overflow on Y-axis only

    overflowXVisible

    Visible overflow on X-axis only

    overflowYVisible

    Visible overflow on Y-axis only

    overflowXScroll

    Scroll overflow on X-axis only

    overflowYScroll

    Scroll overflow on Y-axis only

    Appearance

    Appearance props for controlling component colors

    primary

    Primary color appearance (gray)

    brand

    Brand color appearance (blue)

    accent

    Accent color appearance (rose)

    secondary

    Secondary color appearance (gray)

    tertiary

    Tertiary color appearance

    success

    Success color appearance (green)

    danger

    Danger color appearance (red)

    warning

    Warning color appearance (amber)

    info

    Info color appearance (cyan)

    link

    Link color appearance (blue, for hyperlinks)

    Padding

    Padding props for controlling internal spacing

    padding

    Enable internal padding

    noPadding

    Disable internal padding

    Variant

    Variant props for controlling component style variations

    filled

    Filled variant - solid background with contrasting text color

    outline

    Outline variant - transparent background with border and colored text (default)

    Transparent

    Transparent prop for disabling background color

    transparent

    Disable background color - makes component background transparent

    Responsive

    Responsive prop for enabling breakpoint-specific sizing

    responsive

    Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap

    On this page

    List

    Basic List

    List Style Types

    List Sizes

    List Appearances

    Nested Lists

    List Styling

    List Props

    Font Weight

    Font Style

    Text Decoration

    Text Transform

    Font Family

    Text Align

    List Style

    Size

    Hide

    Items

    Justify

    Position

    Display

    Overflow

    Appearance

    Padding

    Variant

    Transparent

    Responsive