Item

Updated:

Provides a versatile and flexible way to present data.

Building Complex Layouts

The item component was built to provide a standard layout for various data types. It uses a series of slots combined with basic styling to give you a vast amount of flexibility in the information you may want to present to users. Here are a number of examples of what you can do with this component.

Account Information

Checking Account
First Second Third 
<q2-item>
    <q2-avatar
        slot="bullet"
        src="/examples/logo.svg"
    ></q2-avatar>
    <div slot="header">Checking Account</div>
    <q2-detail
        label="Account Number"
        description="xxxx-xxx-0745"
        slot="body"
    ></q2-detail>
    <div slot="footer">
        <q2-detail
            label="Account type"
            description="Loan"
        ></q2-detail>
        <q2-detail
            class="mrg-y(3x)"
            alignment="left"
            label="Interest Rate"
            description="3.5%"
        ></q2-detail>
        <q2-detail
            class="mrg-y(3x)"
            alignment="left"
            label="Interest Earned (YTD)"
        >
            <q2-currency amount="34.15"></q2-currency>
        </q2-detail>
        <hr />
        <q2-detail
            class="mrg-y(3x)"
            alignment="left"
            label="Current Balance"
            size="small"
        >
            <q2-currency amount="12953.25"></q2-currency>
        </q2-detail>
        <q2-detail
            class="mrg-y(3x)"
            alignment="left"
            label="Available Balance"
            size="small"
        >
            <q2-currency amount="12782.19"></q2-currency>
        </q2-detail>
    </div>
    <q2-dropdown
        slot="action"
        type="icon"
        label="My dropdown"
        icon="options"
        popover-alignment="right"
        hide-label
    >
        <q2-dropdown-item value="first">First</q2-dropdown-item>
        <q2-dropdown-item value="second">Second</q2-dropdown-item>
        <q2-dropdown-item value="third">Third</q2-dropdown-item>
    </q2-dropdown>
</q2-item>

Contact Information

Maria Chen
First Second Third 
<q2-item>
    <q2-avatar
        slot="bullet"
        src="/examples/headshot.jpg"
    ></q2-avatar>
    <div slot="header">Maria Chen</div>
    <q2-detail
        label="Company"
        description="Mountaintop Souvenirs"
        slot="body"
    ></q2-detail>
    <q2-detail
        label="Mobile"
        description="(555) 555-5555"
        slot="body"
    ></q2-detail>
    <q2-detail
        label="Email"
        description="maria.chen@mountaintop-souvenirs.com"
        slot="body"
    ></q2-detail>
    <q2-dropdown
        slot="action"
        type="icon"
        label="My dropdown"
        icon="options"
        popover-alignment="right"
        hide-label
    >
        <q2-dropdown-item value="first">First</q2-dropdown-item>
        <q2-dropdown-item value="second">Second</q2-dropdown-item>
        <q2-dropdown-item value="third">Third</q2-dropdown-item>
    </q2-dropdown>
</q2-item>

Message

Payment Due
<q2-item>
    <q2-avatar
        slot="bullet"
        icon="mail"
    ></q2-avatar>
    <div slot="header">Payment Due</div>
    <q2-detail
        label="From"
        description="Thrive Bank"
        slot="body"
    ></q2-detail>
    <q2-detail
        label="Received"
        slot="body"
    >
        <q2-relative-time
            date="2024-12-10"
            unit="day"
            message-format="long"
        ></q2-relative-time>
    </q2-detail>
</q2-item>

Slots

The q2-item element has multiple slots that can be used to insert custom content into the component.

Learn more about slots

An optional slot to display custom content in the action area. Use this to provide buttons or interactive elements related to the item.

An optional slot to display custom content in the body area. Use this to provide the main content of your item.

An optional slot to display custom content in the bullet area. Use this to provide a visual indicator or icon for your item.

An optional slot to display custom content in the footer area. Use this to provide additional information or actions related to the item.

An optional slot to display custom content in the header area. Use this to provide a title or label for your item.

Properties

Learn more about properties.

clickable

Makes the item clickable.

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-context
    • q2-file-picker

    Design Overview

    The Item component is designed to be used within the List component, especially when displaying a vertically stacked, repeating set of content. Its flexible slot-based anatomy allows for a wide range of layouts and use cases.

    When to Use

    Use the Item component inside the List component when presenting stacked content that benefits from easy visual scanning. Its side-by-side cell layout helps users quickly scan a vertical list to locate specific information.

    Anatomy

    Item anatomy with redlines

    The Item component is composed of five customizable slots (illustrated above), providing flexibility in structure and content. It supports the inclusion of the Detail and Currency components for enhanced data presentation.

    • Detail Component: Use this only when a label is necessary to clarify a value or piece of text. It should not be used solely for layout or visual styling.
    • Currency Component: Useful for displaying monetary values consistently within the item layout.

    Detailed Guidance

    Slot Usage

    1. Bullet Slot
      1. q2-avatar
      2. q2-icon
      3. null
    2. Header Slot
      1. Detail component in all sizes.
    3. Action Slot
      1. Button or Link
      2. Checkbox
      3. Dropdown
      4. Pill
      5. Null
    4. Body Slot
      1. Detail Component in all sizes
    5. Footer Slot
      1. Up to 3 detail components stacked.

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    The following CSS variables are available to override the default theme styles of the q2-itemcomponent.