---
title: Use the ResultTemplate component
slug: latest-result-template-usage
canonical_url: https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/
collection: quantic
source_format: adoc
---
# Use the ResultTemplate component
Quantic lets you define [templates](https://docs.coveo.com/en/quantic/latest/usage#result-templates) for multiple types of search results to customize how they look.
Further, Quantic provides a [`ResultTemplate`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-template) component, which provides a recommended display structure using predefined and formatted [slots](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-slots.html).
Using this component eases the process of creating new templates that are both responsive and stylistically cohesive.

While optional, use this component when building result templates.

![Diagram showing sections of Quantic result template slots | Coveo](quantic/quantic-result-template-slots.png)

To use the ResultTemplate component, divide your result template into multiple building blocks called _result sections_.
Quantic supports a variety of result sections, each of which has a different purpose and behavior:

* [`label`](#label-section)

* [`badges`](#badges-section)

* [`actions`](#actions-section)

* [`date`](#date-section)

* [`visual`](#visual-section)

* [`title`](#title-section)

* [`metadata`](#metadata-section)

* [`emphasized`](#emphasized-section)

* [`excerpt`](#excerpt-section)

* [`bottom-metadata`](#bottom-metadata-section)

* [`children`](#children-section)

Result sections are flexible to fit their content and rearrange themselves based on the screen size, following the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/) (SLDS) [responsive layout options](https://www.lightningdesignsystem.com/utilities/grid/#Responsive-Layout-Options).

Here's an example of how to define result sections:

![Quantic result section example](quantic/quantic-result-section.png)

```html
<template>
 <c-quantic-result-template>
   <c-quantic-result-label slot="label" result={result}></c-quantic-result-label>
 
   <div slot="badges" class="slds-grid slds-grid_vertical-align-center">
     <div class="slds-m-right_xx-small">
       <c-quantic-result-tag variant="recommended" result={result}></c-quantic-result-tag>
     </div>
     <c-quantic-result-tag variant="featured" result={result}></c-quantic-result-tag>
   </div>
 
   <template if:true={resultHasPreview}>
     <c-quantic-result-quickview slot="actions" engine-id={engineId} result={result}></c-quantic-result-quickview>
   </template>
 
   <p slot="date" class="slds-size_xx-small">
     <lightning-formatted-date-time value={result.raw.date}></lightning-formatted-date-time>
   </p>
 
   <h3 slot="title">
     <c-quantic-result-link result={result} engine-id={engineId}></c-quantic-result-link>
   </h3>
 
   <div slot="visual" class="slds-size_1-of-1 slds-medium-size_1-of-4 slds-large-size_1-of-4 slds-p-right_x-small slds-m-bottom_x-small">
     <img style="border-radius: 4px; border: none;" src={videoThumbnail}></img>
   </div>
 
   <div slot="excerpt">
     {result.Excerpt}
   </div>
 
   <div slot="bottom-metadata" class="slds-grid slds-text-align_left slds-m-top_xx-small" style="font-size: 10px">
     <lightning-icon icon-name="utility:clock" size="xx-small"></lightning-icon>
     <span class="slds-m-left_xxx-small">{videoTimeSpan}</span>
   </div>
 </c-quantic-result-template>
</template>
```

## Template section reference

### Label section

Slot: `"label"`

Purpose: This section provides information about the type of result.
Use it with a `quantic-result-label` component to display a label describing the result type with an appropriate icon for quick identification.

Behavior: Disappears when empty.

### Badges section

Slot: `"badges"`

Purpose: This section provides badges that highlight special attributes of the item.
Use it to display a `quantic-result-badge`.

Behavior:

* Appears as the top section in `small` layouts.

* Disappears when empty.

### Actions section

Slot: `"actions"`

Purpose: This section allows the information seeker to perform an action on an item without having to view its details.
For example, it can contain the `quantic-result-quickview` component to open a content preview in a modal.

Behavior: Disappears when empty.

### Date section

Slot: `"date"`

Purpose: This section provides a date related to the given result.

Behavior:

* Has a defined CSS font-size property for text.

* Has a defined CSS color property for text.

* Disappears when empty.

### Visual section

Slot: `"visual"`

Purpose: This section provides visual information about the item.
For example, in a commerce interface, an image is a great shorthand for a product category.
An icon can quickly show the item type, or an avatar can quickly show the target customer.

Behavior:

* Responsive SLDS [grid](https://www.lightningdesignsystem.com/utilities/grid/) size classes should be given to a container element for the image to display.
This element should be the one attributed to the slot.

* May appear above or beside the Title section.

* Disappears when empty.

### Title section

Slot: `"title"`

Purpose: This section identifies the item by its name, and its main use is to make the result list scannable.
This is usually the page title.
Use it to display a `quantic-result-link`.

Behavior:

* Has a defined CSS font-size property for text.

* Has a defined CSS font-weight property for text.

* Disappears when empty.

### Metadata section

Slot: `"metadata"`

Purpose: This section surfaces some fields that are directly related to the title of the item.
For example, in a service interface, this could be the author of a Chatter post.

Behavior:

* Is the closest element beneath the title section.

* Disappears when empty.

### Emphasized section

Slot: `"emphasized"`

Purpose: This section displays the field which is the most relevant based on the search criteria.
For example, in a commerce interface, the product cost is often more important than the title itself.

Behavior:

* Is the second closest element beneath the title section.

* Disappears when empty.

### Excerpt section

Slot: `"excerpt"`

Purpose: This section contains an informative summary of the item content.

Behavior: Disappears when empty.

### Bottom metadata section

Slot: `"bottom-metadata"`

Purpose: This section displays additional descriptive information about the item.

Behavior: Disappears when empty.

### Children section

Slot: `"children"`

Purpose: This section contains the [`QuanticResultChildren`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-children/) component which renders child results.

Behavior: Disappears when empty.