List with Icons

Improve list readability with icons

npm create webcore@latest add IconList

Use the IconList component to combine text with icons, improving readability and making informational content visually more engaging. You can use them to highlight features or benefits of a product, create pros and cons list, or organize information like contact details or services.

<IconList items={[
    { icon: 'circle-check', text: 'Advantages: ...', color: 'var(--w-color-success)' },
    { icon: 'circle-close', text: 'Disadvantages: ...', color: 'var(--w-color-alert)' }
]} />

The IconList component expects an array of items in the form of:

• icon: Specify an icon using the icon property. Pass the type of icon for Astro components, or import SVG strings to your component and pass them to the icon prop. For a list of available icons in Webcore, see the documentation of the Icon component.
• text: Sets the text for the list item. The text property supports HTML content.
• color: Optionally, you can set the color of the icon using the color property. You can use existing Webcore color variables.

Columns

By default, the IconList component will create a simple ul with icons using a single column. This can be modified by setting the columns prop:

<IconList
    columns={2}
    items={[
        { icon: 'circle-check', text: 'Highlight 1', color: 'var(--w-color-success)' },
        { icon: 'circle-check', text: 'Highlight 2', color: 'var(--w-color-success)' },
        { icon: 'circle-check', text: 'Highlight 3', color: 'var(--w-color-success)' },
        { icon: 'circle-close', text: 'Downside 1', color: 'var(--w-color-alert)' },
        { icon: 'circle-close', text: 'Downside 2', color: 'var(--w-color-alert)' },
        { icon: 'circle-close', text: 'Downside 3', color: 'var(--w-color-alert)' }
    ]}
/>

The column prop will not take effect for small screen devices, instead, the element will be displayed using a single column. If you don’t want this behavior, you can remove the media query from your icon-list.module.scss file:

@include media(xs) {
  .list {
      columns: var(--w-icon-list-columns);
  }
}

If you want to use X amount of columns by default, you can override the following CSS property, and omit the columns prop from the component:

body {
    --w-icon-list-columns: 2;
}

Icon Colors

In the above examples, icons colors were specified on an individual basis. However, you can set a single color for every list item by defining the color prop on the component:

• Highlight 1
• Highlight 2
• Highlight 3

<IconList
    color="var(--w-color-success)"
    items={[
        { icon: 'circle-check', text: 'Highlight 1' },
        { icon: 'circle-check', text: 'Highlight 2' },
        { icon: 'circle-check', text: 'Highlight 3' }
    ]}
/>

Similar to the column count, you can set this color globally if you only need to use a single color for all components. Simply override the following CSS variable:

body {
    --w-icon-list-color: var(--w-color-success);
}

API

type IconListProps = {
    columns?: number
    color?: string
    items: {
        icon: string
        text: string
        color?: string
    }[]
    className?: string
}