This component enables you to show further details of something hidden behind a click action

title

A title passed in to show to the left of details

details

The message contained in the action click.

details-type

details-type is optional, and if not entered in, it will default to 'info'

This is one of 4 types which will chang the color theme:

• 'critical'
• 'info'
• 'success'
• 'warning'

Details with Title

Details if a title is passed in

HTML

<div class="t-content">
    <inv-details
        title-text="'Example Title'"
        details="'An example detailed message to be shown in Details section'"
        details-type="'info'">
    </inv-details>
</div>

Details without a Title

Details if a title is not passed in

HTML

<div class="t-content">
    <inv-details
        details="'An example detailed message to be shown in Details section'">
    </inv-details>
</div>

Different Types of Details

Details shown with different themed types.

HTML

<div class="t-content">
    <inv-details
        title-text="'Critical Title'"
        details="'An example detailed message to be shown in Details section'"
        details-type="'critical'">
    </inv-details>
</div>

<div class="t-content u-pt++">
    <inv-details
        title-text="'Information Title'"
        details="'An example detailed message to be shown in Details section'"
        details-type="'info'">
    </inv-details>
</div>

<div class="t-content u-pt++">
    <inv-details
        title-text="'Success Title'"
        details="'An example detailed message to be shown in Details section'"
        details-type="'success'">
    </inv-details>
</div>

<div class="t-content u-pt++">
    <inv-details
        title-text="'Warning Title'"
        details="'An example detailed message to be shown in Details section'"
        details-type="'warning'">
    </inv-details>
</div>