RelatedTeaser: React

A RelatedTeaser highlights associated articles, seamlessly integrating within the main content to guide readers to related insights.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/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 { RelatedTeaser } from '@mediahuis/chameleon-react';

export default function Example() {
  return <RelatedTeaser prefix="Prefix" title="Title" link="#" />;
}

Properties

Property	Type	Default	Required	Description
className	String	-	No	Allows extending the class names of the teaser.
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")
image	ElementType | ReactElement	-	No	The image to be shown in the teaser.
imageOptions	Unknown	{}	No	Options to add to the image, such as aspect-ratio
prefix	String	-	No	Describes the prefix to be shown before the title, e.g., "Read more:"
testIDs	Unknown	{}	No	Test IDs for automated testing.
title	String	-	Yes	The display title of the teaser.
titleTagName	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'	'h3'	No	The html-tag to be used for the title.

• Installation
• Properties