Splendid Labz

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={/* ... */ }
/>