TextOnImageTeaser: 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 Text On Image Teaser which shows a preview of the content’s main points on top of an image.

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

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

Properties

Property	Type	Default	Required	Description
`as`	ElementType	'article'	No	Allows rendering the TextOnImageTeaser with a different HTML tag or a different custom component.
`articleType`	'article' \| 'video'	'article'	No	The type of article the teaser links to. This could add a visual indicator to the teaser, such as a play button.
`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 setting.
`duration`	String	-	No	A property to indicate the duration of the media in the article, should there be any.
`editorialLabel`	String	-	No	Optional label to display on the teaser to highlight current status or urgency, such as 'Breaking' or 'Live'.
`editorialAnimation`	Boolean	-	No	Activates a pulsating animation typically used to indicate live content.
`external`	Boolean	-	No	Indicates that the teaser links to an external resource. This adds a visual indicator after the title.
`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.
`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. Aspect-ratio can also be a list of responsive values, so a teaser can have a different aspect-ratio on the screen size of your choice.
`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`	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.
`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`	Omit	{}	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 and imageOptions.aspectRatio. 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.

<TextOnImageTeaser
  imageOptions={{
    aspectRatio={{
      xs: '1:1',
      sm: '1:2',
      md: '2:1',
      lg: '16:9',
      xl: '21:9',
    }}
  }}
  size={{
    xs: 'sm',
    sm: 'md',
    md: 'lg',
    lg: 'sm',
    xl: 'md',
  }}
  {...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.

<TextOnImageTeaser
  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 different aspect-ratio's on varying breakpoints and only shows on xs and sm screens.

<TextOnImageTeaser
  imageOptions={{
    aspectRatio={{
      xs: '1:1',
      sm: '1:2',
      md: '2:1',
      lg: '16:9',
      xl: '21:9',
    }},
    hidden: {
      xs: true,
      sm: true,
      md: false,
      lg: false,
      xl: false,
    },
  }},
  {...props}
/>

Installation
Properties

Installation​

Properties​

Responsive Properties​

DateTimeOptions​

dateTimeOptions.position​

IntroductionOptions​

ImageOptions​