atomic-result-badge
atomic-result-badge
The atomic-result-badge
element renders a badge to highlight special features of a result.
A badge can either display:
-
Text:
<atomic-result-badge label="trending"></atomic-result-badge>
-
The contents of a single-value field:
<atomic-result-badge field="objecttype"></atomic-result-badge>
-
An icon:
<atomic-result-badge icon="https://my-website.fake/star.svg"></atomic-result-badge>
-
Slotted elements:
<atomic-result-badge icon="https://my-website.fake/stopwatch.svg">
Deal ends in <my-dynamic-countdown></my-dynamic-countdown>
</atomic-result-badge>
The contents of a multi-value field can be displayed as in the following example:
<atomic-result-badge icon="https://my-website.fake/language.svg">
<atomic-result-multi-value-text field="language"></atomic-result-multi-value-text>
</atomic-result-badge>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
|
|
The field to display in the badge. Not compatible with |
|
|
|
|
Specifies an icon to display at the left-end of the badge.
This can be used in conjunction with
|
|
|
|
|
The text to display in the badge. Not compatible with |
|
Slots
Slot | Description |
---|---|
|
The element(s) to display inside the badge, instead of a field or label. |
Shadow Parts
Part | Description |
---|---|
|
The decorative outer-most element with the background color and text color. |
|
The icon displayed at the left-end of the badge, if present. |
|
The wrapper around the contents at the right-end of the badge. This may be text, a field or slotted elements depending on which was configured. |