Item

Versatile component for combining media, text, and actions in flexible layouts.

Guidelines

You can treat the Item component as a classic media object component. It is flexible and can be used in various ways. Consider using it before creating a new component.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemMeta,
  ItemMedia,
  ItemAction
} from "components/selia/item";

Structure

The expected structure and composition of the component.

<Item>
  <ItemMedia />
  <ItemContent>
    <ItemTitle />
    <ItemDescription />
    <ItemMeta />
  </ItemContent>
  <ItemAction />
</Item>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Variant

The Item component can be used with various variants.

Outline

We also have outline variants to create a more subtle appearance.

Plain

This is useful when you want to put an item in a list of items. It will have no background color and no border – just a simple item.

Icon

The IconBox component can be used to add an icon to the item.

Meta

You may want to add a meta information such as a timestamp or a status. This can be achieved by using the ItemMeta component.

Stack

The Stack component can be used to stack items together.