Zum Inhalt springen

Content & Typography · 13 Props

List

Ordered or unordered list with variant styles (bullets, checks, numbered, none). Supports tone coloring and icons per item.

Content & Typography 13 Props

src/components/blocks/List.astro

← Alle Components

Props

Prop Type Default Beschreibung
bulletIcon string solar:arrow-right-linear Icon used for `bullets` variant. Defaults to a simple arrow. Per-item `icon` still wins.
checkIcon string solar:check-circle-linear
class string —
iconSize string — "sm" | "md" | "lg" | "xl"
iconVariant string plain "plain" | "bg" | "border" | "both"
itemClass string —
items object[] []
items[].href string —
items[].icon string —
items[].text any — Text: string or { text, class }
items[].title any — Title: string or { text, class }
layout string horizontal `horizontal` (default): icon left, text right. `stacked`: icon+title row, text below. `centered`: icon top center, text below. "horizontal" | "stacked" | "centered"
rowClass string —
textClass string — Override the built-in text class (default: "text-sm text-muted").
titleClass string — Override the built-in title class (default: "text-sm font-semibold").
tone string accent "primary" | "accent" | "neutral" | "success" | "info" | "warning" | "error"
variant string bullets "bullets" | "checks" | "icons"

Beispiele

Variants

checks, bullets, numbered, none.

Check variant
With success tone
Great for feature lists
Bullet variant
Default styling
Simple unordered list
First step
Second step
Third step
No markers
Clean list
Minimal styling
{
  "type": "grid",
  "props": {
    "cols": 2,
    "gap": "lg"
  },
  "blocks": [
    {
      "type": "list",
      "props": {
        "variant": "checks",
        "tone": "success",
        "items": [
          {
            "text": "Check variant"
          },
          {
            "text": "With success tone"
          },
          {
            "text": "Great for feature lists"
          }
        ]
      }
    },
    {
      "type": "list",
      "props": {
        "variant": "bullets",
        "items": [
          {
            "text": "Bullet variant"
          },
          {
            "text": "Default styling"
          },
          {
            "text": "Simple unordered list"
          }
        ]
      }
    },
    {
      "type": "list",
      "props": {
        "variant": "numbered",
        "items": [
          {
            "text": "First step"
          },
          {
            "text": "Second step"
          },
          {
            "text": "Third step"
          }
        ]
      }
    },
    {
      "type": "list",
      "props": {
        "variant": "none",
        "items": [
          {
            "text": "No markers"
          },
          {
            "text": "Clean list"
          },
          {
            "text": "Minimal styling"
          }
        ]
      }
    }
  ]
}
<Grid cols={2} gap="lg">
  <List
    variant="checks"
    tone="success"
    items={[{"text":"Check variant"},{"text":"With success tone"},{"text":"Great for feature lists"}]}
  />
  <List variant="bullets" items={[{"text":"Bullet variant"},{"text":"Default styling"},{"text":"Simple unordered list"}]} />
  <List variant="numbered" items={[{"text":"First step"},{"text":"Second step"},{"text":"Third step"}]} />
  <List variant="none" items={[{"text":"No markers"},{"text":"Clean list"},{"text":"Minimal styling"}]} />
</Grid>