ListTeaser: React
An article teaser refers to a summary of a longer written news article. Its purpose is to entice readers and generate interest in the full article by offering a glimpse of the content's main points, intriguing information, or engaging elements. This pattern is called the List Teaser.
Installation
Before you can start using the @chameleon/react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { ListTeaser } from '@chameleon/react';
export default function Example() {
return <ListTeaser title="Example" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
articleType | 'article' | 'video' | 'podcast' | 'article' | No | The type of article the teaser links to. This could add a visual indicator to the teaser, such as a play button. |
as | ElementType | 'article' | No | Allows rendering the ListTeaser with a different HTML tag or a different custom component. |
className | String | - | No | Allows extending the class names of the teaser. |
dateTime | String | - | No | DateTime of the article, indicate when the teaser has been published. Should be in (ISO8601) notation. |
dateTimeOptions | Omit | { format: dateTimeTimeFormat } | No | The date and time formatting setting. |
external | Boolean | - | No | Indicates that the teaser links to an external resource. This adds a visual indicator after the title. |
link | String | ReactNode | - | Yes | You can pass a simple URL as string, or you could supply your own component if you would like to add custom props to it (e.g. if you want to add target="_blank") |
loading | Boolean | - | No | The loading state of the teaser. Will show skeleton loader over the teaser. |
prefix | String | - | No | Prepend a prefix to the title. |
premium | Boolean | - | No | Adds a visual indication that the teaser links to premium content. |
premiumAccessibilityLabel | String | Context locale premium (from ChameleonProvider) | No | The label for the premium indicator, this will be read out by screen readers. |
testIDs | { dateTime?: String; duration?: String; link?: String; title?: String; introduction?: String; image?: String; label?: String; subLabel?: String; prefix?: String; premium?: String; podcastIcon?: String; externalIcon?: String; videoIcon?: String } | {} | No | Test IDs for automated testing. |
title | String | - | No | The title of the teaser. |
titleTagName | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'h2' | No | The HTML tag to be used for the title, this has no effect on styling, but is important for accessibility and SEO. |
DateTimeOptions
The dateTimeOptions property is an object with configuration for the dateTime, like format, locale and timeZone. This uses the DateTime component internally.