Detail

Updated:

A container for displaying related text.

Displaying Formatted Text

While the detail component works great out of the box for displaying plain text key-value pairs, you may want to use it to display things like currency, relative dates, and more. Doing this is quite easy by utilizing the slot within <q2-detail>.

  • Currency

    <q2-detail
    label="Current Balance"
    alignment="left"
    stacked
>
    <q2-currency amount="12953.25"></q2-currency>
</q2-detail>

  • Relative Time

    <q2-detail
    label="Last Updated"
    alignment="left"
    stacked
>
    <q2-relative-time
        date="2024-12-10"
        unit="day"
        message-format="long"
    ></q2-relative-time>
</q2-detail>

Slots

The q2-detail element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional slot to display a custom label.

Properties

The q2-detail element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

alignment

Defines the alignment of the label and description when stacked, or when only the label or description is present.

description

Defines the text content of the description.

Localizable
label

Defines the text content of the label.

Localizable
size

Defines the text size of the label and description.

If not specified, the detail will display as inline text.

stacked

Determines if the description should appear beneath the label.

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-detail component.