List

Bulleted, numbered, plain or icon lists.

An interactive page: C# runs over a Blazor Server connection.

A bulleted, numbered or icon list of ListItems, spaced with Gap. <List Icon="Lucide.Check" IconColor="Color.SuccessText"> makes a check list.

Usage

razor

<List Icon="Lucide.Check" IconColor="Color.SuccessText">
    <ListItem>Unlimited projects</ListItem>
    <ListItem>Priority support</ListItem>
</List>

<List Ordered>
    <ListItem>Install the package.</ListItem>
    <ListItem>Add IzzyTheme to App.razor.</ListItem>
</List>

Bulleted, numbered and plain

Use Ordered for a numbered list and Plain for one with no bullets or indent.

Preview Code

Preview

Unlimited projects
Custom domains
Daily backups

Add the package
Put IzzyTheme in the head
Map the endpoints

Ada Lovelace
Grace Hopper
Alan Turing

Code

Kinds.razor

<Grid Columns="new() { Base = 1, Sm = 3 }" Gap="6" Grow>
    <List>
        <ListItem>Unlimited projects</ListItem>
        <ListItem>Custom domains</ListItem>
        <ListItem>Daily backups</ListItem>
    </List>
    <List Ordered>
        <ListItem>Add the package</ListItem>
        <ListItem>Put IzzyTheme in the head</ListItem>
        <ListItem>Map the endpoints</ListItem>
    </List>
    <List Plain>
        <ListItem>Ada Lovelace</ListItem>
        <ListItem>Grace Hopper</ListItem>
        <ListItem>Alan Turing</ListItem>
    </List>
</Grid>

Icon lists

Use Icon and IconColor to put an icon in place of each bullet; an item's own Icon wins.

Preview Code

Preview

Unlimited projects
Priority support, answered within a day
Single sign-on with your identity provider
Not included: on-premises hosting

Code

Checklist.razor

<List Icon="Lucide.Check" IconColor="Color.SuccessText" Gap="3" MaxWidth="24.Rem" Grow>
    <ListItem>Unlimited projects</ListItem>
    <ListItem>Priority support, answered within a day</ListItem>
    <ListItem>Single sign-on with your identity provider</ListItem>
    <ListItem Icon="Lucide.X" IconColor="Color.DangerText">Not included: on-premises hosting</ListItem>
</List>

Parts

Written inside List. The API page lists their parameters.

ListItem: an item in a List: a li, with the list's icon or its own.

Mode support

What works in each mode, List
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a ul, or an ol when Ordered, of li items, so screen readers announce a list and its count.
Lists without bullets (Plain or an Icon) keep role="list", which Safari otherwise drops from a list with no markers.
Item icons are decorative and hidden from screen readers, so the item's text must carry the meaning, such as "Included" or "Not included".

Parameters

List parameters
Prop	Type	Default
`Ordered`A numbered list (ol).	`bool`	`false`
`Plain`No bullets or numbers, and no indent.	`bool`	`false`
`Icon`An icon in place of each bullet, such as Lucide.Check.	`IconData?`
`IconColor`The icons' color.	`Color?`	`computed`
`Gap`Space between items, on the spacing scale.	`Responsive<int>`	`2`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"ul"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API