Highlight

Caast Highlight is an interactive component allowing your users to have a preview of the content teaser/live or replay. It can also display what we call the reminder, a way to subscribe via SMS/calendars to be notified when the live starts

Settings

You have the possibility to choose the player behaviour, by default the player will only play 10seconds of the selected content, but you can choose if you want a full length play, only play the teaser or choose to not play the content at all and just tease it with an image. You can also choose if you want to only trigger the video play only when the highlight enters in view. There is also an option to display or not the reminder

Styling

/*
* -----------------------------------
* Style for Caast Highlight
* -----------------------------------
*/

/*
* A set of css variable used to customize the collection,zzzzz
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-background-darken;
  --caast-button-color;
  --caast-button-ring;
  --caast-is-live-color;
  --caast-share-button-copy-background;
  --caast-share-button-copy-background-darken;
  --caast-share-button-copy-background-success;
  --caast-share-button-copy-color;
  --caast-share-color;
}

/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="highlight"] {
}
/*
*   Wrapper for live card
*/
.caast-card {
}
/*
*   Class added to .caast-card to identify highlight variation
*/
.caast-card--highlight {
}
/*
*   Class added to .caast-card to identify if content is displayed in portrait
*/
.caast-card--portrait {
}
/*
*   Wrapper for card player
*/
.caast-card__player {
}
/*
*   Class for card image
*/
.caast-card__image {
}
/*
*   Wrapper for live card content
*/
.caast-card__content {
}
/*
*   Class for led visual indicator
*/
.caast-card__indicator {
}
/*
*   Class added to .caast-card__indicator for replay variation
*/
.caast-card__indicator--replay {
}
/*
*   Class added to .caast-card__indicator for soon variation
*/
.caast-card__indicator--soon {
}
/*
*   Class for fullscreen toggler
*/
.caast-card__fullscreen {
}
/*
*   Class for badge containing date or countdown
*/
.caast-card__badge {
}
/*
*   Class added to .caast-card__badge for planned variation
*/
.caast-card__badge--planned {
}
/*
*   Class added to .caast-card__badge for soon variation
*/
.caast-card__badge--soon {
}
/*
*   Class added to .caast-card__badge for live variation
*/
.caast-card__badge--live {
}