Fancy List

FancyList lets you create lists with bullets that use SVG icons or emojis.

Make lists with emoji bullets

Use the emoji property to create list items with emoji bullets.

<FancyList emoji="👏" items={[
  'bullet 1',
  'bullet 2',
  'bullet 3',
  'bullet 4'
]} />

Because I’m Happy ~♪

Clap along if you:

👏
feel like a room without a roof
👏
feel like happiness is the truth
👏
know what happiness is to you
👏
feel like that's what you wanna do

Or SVG Icons

Choose from over 200,000 open source icons from the iconify project, including but not limited to Tabler, Phosphor, Material, and Carbon icons.

<FancyList icon="ph:check" items={[
  'bullet 1',
  'bullet 2',
  'bullet 3',
  'bullet 4'
]} />

Checklists
Made
Easy

Starlists
Too

And many other
Types of lists

Write list items in Markdown

This makes it much easier for you to create the list items that you want! (FancyList uses Markdown under the hood to achieve this).

<FancyList icon="ph:check" items={[
  '**Write**',
  '_in_',
  '[markdown](link)'
]}/>

Write
in
markdown

Use different icons and emojis in the same list

Send visual, memorable, messages with the help of icons and emojis. Take your list-game up a level!

<FancyList items={[
  { emoji: '🍎', value: 'Apple' },
  { icon: 'tabler:blender', value: 'Blend them all ... ' },
]} />

🍎
Apple
🍌
Banana
🥕
Carrot
Blend them all and you get...
🥤
ABC Juice!

Style your SVGs

You can use simple-svg to help style your FancyList SVG icons. Just add the class and pop in your fill or stroke value!

<FancyList
  class="simple-svg"
  icon="ph:star-fill"
  style="--fill-color: lightpink"
>
  ...
</FancyList>

Starry
Starry
Night

Importing the Component

You can import the FancyList component to use it.

---
import { FancyList } from '@splendidlabz/astro'
---

<FancyList ... />

Using emoji bullets

You can use emoji to create lists with emoji bullets.

<FancyList
  emoji="👏"
  items={['Bullet 1', 'Bullet 2', 'Bullet 3', 'Bullet 4']}
/>

Using SVG Icons

You can use icon to create lists with SVG icons. Please see SVG to understand how icon works.

<FancyList
  icon="ph:check"
  items={['Bullet 1', 'Bullet 2', 'Bullet 3', 'Bullet 4']}
/>

Using different icons or emojis for each item

Pass in an array of objects into items. Each object should take in an emoji or icon property for the bullet and a value property for the text value.

<FancyList
  items={[
    { emoji: '⭐', value: 'Star Emoji' },
    { icon: 'ph:star', value: 'Star Icon' },
  ]}
/>

Markdown Support

FancyList supports Markdown by using the Markdown component. Just pass any valid markdown into items and they will be converted into Markdown content.

<FancyList
  icon="ph:check"
  items={[
    '**Write**',
    '_items_',
    'in',
    '[markdown](https://daringfireball.net/projects/markdown/)',
  ]}
/>

Alternatively, you can also write markdown directly as the slot content. Take note that if you do this, you may need to use prettier-ignore as mentioned on the Markdown component.

<!-- prettier-ignore -->
<FancyList icon="ph:check">
  - **Write**
  - _items_
  - in
  - [markdown](https://daringfireball.net/projects/markdown/)
</FancyList>

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Basic Styles

You can import the basic styles for FancyList through Splendid Styles.

// styles.scss
@use '@splendidlabz/styles/components/FancyList';

/* styles.css */
@import '@splendidlabz/styles/components/FancyList';

Note

Please note that the above code block contains installation instructions only for FancyList. If you wish to install styles for all components, see Installing Splendid Styles

Custom styles

FancyList produces the following HTML:

<ul class="FancyList" role="list">
  <!-- For SVG icon bullets -->
  <li role="listitem">
    <svg><!-- SVG icon --></svg>
    <span>Text</span>
  </li>

  <!-- For emoji bullets -->
  <li role="listitem">
    <span class="emoji"><!-- emoji --></span>
    <span>Text</span>
  </li>
</ul>

Note

We set the roles and listitem to <ul> and <li> respectively to retain accessibility since list-style had to be removed.

Styling with CSS

Styling FancyList with custom CSS is easy. You can overwrite our styles with a single class because we wrote the CSS for you with customizability in mind.

.FancyList {
  /* ... your styles here ... */
}

Styling with Tailwind

You can use the following properties to style FancyList with Tailwind:

Property	Description
`class`	Class for the `<ul>` element
`liClass`	Class for the `<li>` element
`emojiClass`	Class for the emoji
`iconClass`	Class for the SVG icon

<FancyList
  class="..."
  liClass="..."
  emoji="👏"
  emojiClass="..."
> ... </FancyList>

Styling SVG Icons

You can use simple-svg to style SVG Icons easily.

<FancyList
  icon="ph:star-fill"
  iconClass="simple-svg"
  style="--fill-color: lightpink"
  items={/* ... */ }
/>

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Styling API

Use these properties to style FancyList with Tailwind or classes.

Property	Description
`class`	Class for the `<ul>` element
`style`	Inline style for the `<ul>` element
`liClass`	Class for the `<li>` element
`emojiClass`	Class for the emoji
`iconClass`	Class for the SVG icon

Functionality API

Use these properties to create a list with custom bullets.

Property	Type	Description
`emoji`	`string`	The emoji to use as the bullet
`icon`	`string`	The SVG Icon to use as the bullet. See `SVG` for instructions on using this.
`items`	`string[] \| Item[]`	List items. See `Item`

Slots

Name	Description
Default	List items written in a Markdown syntax.

Types

Item

List of items. This is required if you did not provide list items in slot content. It can be an array of strings or Item objects.

Type: string[] | object[]
Default: []

If objects are passed into items, each object have have the following :

interface Item {
  value: string // Text value
  icon?: string // SVG Icon
  emoji?: string // Emoji
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.