Detail

Updated:

Use for displaying label-value pairs like account details or miscellaneous info.

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.

align

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.

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.

Development

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>

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account List Page

    How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.

  • Account Details Page

    How to build an Account Details page in Tecton: a sortable, filterable transaction list with client-side search, column sorting, and pagination.

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

  • Bank Statement Page

    How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.

  • Funds Transfer Page

    How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.

  • Message Center Page

    How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.

Accessibility

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.

CSS Variables

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

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (12)