DefaultTeaser: 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 Default Teaser because it’s the most common visual representation of an article teaser.

Overview React Swift Kotlin

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 { DefaultTeaser } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <DefaultTeaser
      title="Title"
      image={
        <img
          src="https://via.placeholder.com/150"
          alt="placeholder"
          width="150"
          height="150"
        />
      }
    />
  );
}

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 DefaultTeaser 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`	DateTimeOptionProps	{}	No	The date and time formatting settings.
`duration`	String	-	No	A property to indicate the duration of the media in the article, should there be any.
`editorialLabel`	String	-	No	A property to indicate an extra label to be shown in the teaser, such as 'Breaking'.
`editorialAnimation`	Boolean	-	No	Optional label to display on the teaser to highlight current status or urgency, such as 'Breaking' or 'Live'.
`external`	Boolean	-	No	Activates a pulsating animation typically used to indicate live content.
`fullHeight`	Boolean	-	No	Determines the height of the teaser. If set to true, the Teaser's link will fill it's parent. This could be useful when vertically justifying.
`highlight`	Boolean	-	No	Visually highlights the teaser, so it stands out.
`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, show/hide on mq's
`inset`	Boolean \| ResponsiveInset	-	No	The inset property adds a padding around the teaser.
`introduction`	String	-	No	Introduction text to be shown in the teaser.
`introductionOptions`	IntroductionOptionProps	{ hidden: false }	No	Other options to add to introduction, such as clamping and show/hide on mq's.
`label`	String	-	No	Label text to be shown in the teaser, above 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.
`orientation`	'horizontal' \| 'vertical' \| ResponsiveOrientation	'horizontal'	No	Orientation of the teaser: vertical or horizontal. This can also be a list of responsive values, so a teaser can be vertical on small screens and horizontal on large screens.
`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	defaultLocale.premium	No	The accessibility label of the premium indicator.
`size`	'sm' \| 'md' \| 'lg' \| ResponsiveSize	'sm'	Yes	The size of elements in the teaser (title, paddings, image size, ...). This can also be a list of responsive values, so a teaser can be small or large on the screen size of your choice.
`subLabel`	String	-	No	Sublabel text to be shown in the teaser, next to the label.
`testIDs`	Unknown	-	No	Test IDs for automated testing.
`title`	String	-	Yes	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.

Responsive Properties

The following properties are responsive and can be customized for different screen sizes: size, orientation and inset. These can be used by passing an object for the property value, where the key is the screen size and the value is the property value for that screen size. Possible screensizes are xs, sm, md, lg and xl.

<DefaultTeaser
  orientation={{
    xs: 'horizontal',
    sm: 'vertical',
    md: 'horizontal',
    lg: 'vertical',
    xl: 'horizontal',
  }}
  size={{
    xs: 'sm',
    sm: 'md',
    md: 'lg',
    lg: 'sm',
    xl: 'md',
  }}
  inset={{
    xs: true,
    sm: false,
    md: true,
    lg: false,
    xl: true,
  }}
  {...props}
/>

DateTimeOptions

The dateTimeOptions property is an object with configuration for the dateTime, like format, locale, timezone and position. This uses the DateTime component internally.

dateTimeOptions.position

This option takes two possible values: meta (the default) or taxonomy. This defines the location where the DateTime component is visually layed out on the teaser component.

IntroductionOptions

The introductionOptions property is an object with configuration for the introduction, like clamp (number of lines visible) and hidden (on which breakpoints to hide/show the introduction). The remaining options get spread over the introduction element.

In this example the introduction is clamped to 2 lines and only shows on xs and sm screens.

<DefaultTeaser
  introductionOptions={{
    clamp: 2,
    hidden: {
      xs: true,
      sm: true,
      md: false,
      lg: false,
      xl: false,
    },
  }},
  {...props}
/>

ImageOptions

The imageOptions property is an object with configuration for the image, like aspectRatio and hidden (on which breakpoints to hide/show the image).

In this example the image has an aspect-ratio of 1:1 and only shows on xs and sm screens.

<DefaultTeaser
  imageOptions={{
    aspectRatio: '1:1',
    hidden: {
      xs: true,
      sm: true,
      md: false,
      lg: false,
      xl: false,
    },
  }},
  {...props}
/>

Installation
Properties

Installation​

Properties​

Responsive Properties​

DateTimeOptions​

dateTimeOptions.position​

IntroductionOptions​

ImageOptions​