List Group

List groups allow you to display series of content.

Basic Example

You can create list groups using the ListGroup component with the ListGroupItem sub-component.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

import React from "react";
import { ListGroup, ListGroupItem } from "shards-react";

export default function ListGroupDemo() {
  return (
    <ListGroup>
      <ListGroupItem>Cras justo odio</ListGroupItem>
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
      <ListGroupItem>Morbi leo risus</ListGroupItem>
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
      <ListGroupItem>Vestibulum at eros</ListGroupItem>
    </ListGroup>
  );
}

Props

The following props are available for the List Group component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
flush	Whether the list group should be flushed, or not.	`Bool`	-	No
small	Whether the list group is small, or not.	`Bool`	-	No
tag	The component's tag type.	`FuncString`	`"ul"`	No

Subcomponents

The following subcomponents are available for the ListGroup component.

<ListGroupItem/>

Prop	Description	Type	Default	Required
active	Whether it is active, or not.	`Bool`	-	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
theme	The theme color.	`String`	-	No
action	Whether it is an action item, or not.	`Bool`	-	No
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"li"`	No

<ListGroupItemHeading/>

Prop	Description	Type	Default	Required
className	The class name.	`Any`	-	No
tag	The component's tag type.	`FuncString`	`"h5"`	No

<ListGroupItemText/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"p"`	No