Skip to content
Wireshark Foundation Components

List

  • List Item 1

    List item 1 content 
---
import { List, ListItem } from "wf-components";
---
<List>
  <ListItem title="List Item 1">List item 1 content</ListItem>
</List>

Props

variant

Optional The variant type of the list, defaults to default, the options are: default, books, publication, numbered, and result.

  • List Item 1

    List item 1 content

  • List Item 1

    List item 1 content 
---
import { List, ListItem } from "wf-components";
---
<List variant="default">
  <ListItem title="List Item 1">List item 1 content</ListItem>
  <ListItem title="List Item 1">List item 1 content</ListItem>
</List>

  1. Numbered Item 1

    Numbered List Item 1

  2. Numbered Item 2

    Numbered List Item 2

  3. Numbered Item 3

    Numbered List Item 3 
---
import { List, ListItem } from "wf-components";
---
<List variant="numbered">
  <ListItem title="Numbered Item 1">Numbered List Item 1</ListItem>
  <ListItem title="Numbered Item 2">Numbered List Item 2</ListItem>
  <ListItem title="Numbered Item 3">Numbered List Item 3</ListItem>
</List>

  • Book Item 1

    Author

    10-10-2024

    Publication

  • Book Item 2

    Author2

    1-11-1999

    Publication2 

---
import { List, ListItem } from "wf-components";
---
<List class="my-16" variant="publication">
  <ListItem publication="Publication" author="Author" date="10-10-2024" title="Book Item 1"></ListItem>
  <ListItem publication="Publication2" author="Author2" date="1-11-1999" title="Book Item 2"></ListItem>
</List>
  • Book Item 1book byAuthor

    Author, Year

    Book Item 1

    Publisher

    ISBN

  • Book Item 2book byAuthor2

    Author2, Year2

    Book Item 2

    Publisher2

    ISBN2 

---
import { List, ListItem } from "wf-components";
---
<List class="flex sm:flex-row flex-col my-16" variant="books">
  <ListItem imgSrc="/src/assets/img/books/placeholder.png" publisher="Publisher" ISBN="ISBN" author="Author" year="Year" title="Book Item 1"></ListItem>
  <ListItem imgSrc="/src/assets/img/books/placeholder.png" publisher="Publisher2" ISBN="ISBN2" author="Author2" year="Year2" title="Book Item 2"></ListItem>
</List>