List component

Basic example

<List dir="/blog"/>

The List component will display all the markdown files in the specified directory. By default, it shows the title as the headline and the description as the summary.

Properties

The List component accepts the following props:

• dir (optional) Directory (relative to site root) to list items from.
  Default: "" (root folder)
  Type: string

• slots (optional) Lets you decide what information should appear in each part of the list item.

  Available slots:

  • media → usually an image
  • eyebrow → small text shown above the title (for example, a date)
  • headline → the main title
  • summary → a short description
  • footnote → small text shown below (for example, authors)

  Each slot can be connected to a field from your page’s frontmatter (like title, description, date, authors, image).

  Default:

  {
    headline: "title",
    summary: "description"
  }
  

• pageSize (optional)
  Number of items per page for pagination. If not provided, all items are shown without pagination. Type: number

Example:

<List
dir="/blog"
slots={{
    headline: "title",
    summary: "description",
    eyebrow: "date",
    footnote: "authors",
    media: "image"
  }}
pageSize={5}
/>

👉 Check it out in our interactive documentation: https://components.flowershow.app/?path=/docs/other-list–docs

Behavior

The List component:

• Ignores README.md and index.md files
• Is recursive (includes files in subdirectories)
• Sorts by date if available, otherwise by title

Styling

The List component renders stable CSS classes you can target from custom.css or a theme:

For example, to make the whole card clickable rather than only the headline:

.list-component-item-headline-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

This works because each .list-component-item is already position: relative. The overlay sits above everything else in the card, so any other links in it (for example in the summary or footnote) stop being clickable. Lift them above the overlay:

.list-component-item a:not(.list-component-item-headline-link) {
  position: relative;
  z-index: 1;
}

The full list, including loading skeleton and pagination classes, is in the theme class reference.