VaneUI

VaneUI

Typography Components

ListItem

Represents a single item within a List component. It can contain text, icons, or other components to create complex list structures.

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>

ListItem 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

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)

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

ListItem

Basic List

List Style Types

List Sizes

List Appearances

Nested Lists

List Styling

ListItem Props

Font Weight

Font Style

Text Decoration

Text Transform

Font Family

Text Align

Size

Hide

Items

Justify

Position

Display

Overflow

Appearance

Variant

Transparent

Responsive