Cards list

Caast Cards list is an easy way to display all your replays. If you have to handle a lots of content, Caast will optimize the total number of items displayed. Users will be able to load more content via a button available under the cards.

Settings

You can configure how much cards should be displayed per row, default is 3. You can also decide to not preview the video while the cursor is hovering the card.

Styling

/*
* -----------------------------------
* Style for Caast Cards List
* -----------------------------------
*/

/*
* A set of css variable used to customize the landing,
* 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;
  --caast-card-width;
}
/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="cards_list"] {
}
/*
*   Wrapper for header
*/
.caast-listing__header {
}
/*
*   Class for header title
*/
.caast-listing__header-title {
}
/*
*   Class for header total
*/
.caast-listing__header-count {
}
/*
*   Wrapper for live card
*/
.caast-card {
}
/*
*   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 {
}
/*
*   Class for button used to load more content
*/
.caast-listing__seemore-button {
}