Collection

Caast Collection is a brand new experience allowing you, in just a few lines, to render your own shorts media channel on your website. You can customize every displayed medias and also extract some shorts from your existing contents. Just sit and let your users enjoy the all-in-one Caast shorts experience.

Behaviour

Caast Collection will be injected in your targeted element and will fill 100% of the available space inside it. We advise to define the target inside your default content container for a better user experience. Note that style customisation inside Caast interface will allow you to adjust the styled output.

Styling

Caast Collection is totally stylable via your own style declaration. You have the possibility to add styles override on the targeted page inside a classic <style> tag. You can also give us the style override, it will be directly merged with the final render, this option allow you to avoid editing your own page and rely totally on Caast

/*
* -----------------------------------
* Style for Caast Collection
* -----------------------------------
*/

/*
* A set of css variable used to customize the collection,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-color;
  --caast-collection-card-width;
  --caast-collection-card-gap;
}

/*
*   Wrapper for injected content
*/
#caast-collection__wrapper {
}
/*
*   Class for collection title
*/
.caast-collection__title {
}
/*
*   Wrapper for collection slider
*/
.caast-collection__slider {
}
/*
*   Wrapper for collection slider item
*/
.caast-collection__item {}
/*
*   Wrapper for collection slider item body
*/
.caast-collection__item-body {
}
/*
*   Class for collection slider item name
*/
.caast-collection__item-name {
}
/*
*   Class for collection slider item image
*/
.caast-collection__item-image {
}
/*
*   Wrapper for collection slider item product
*/
.caast-collection__item-product {
}
/*
*   Class for collection slider item product image
*/
.caast-collection__item-product-image {
}


/*
*   Class for collection slider arrows
*/
.caast-slider__arrow {
}
/*
*   Class for collection slider arrows position
*/
.caast-slider__arrow-next,
.caast-slider__arrow-prev {
}
/*
*   Class for collection slider arrow disabled state
*/
.caast-slider__arrow[aria-disabled='true']{
}
/*
*   Wrapper for slider container
*/
.caast-slider__container {
}
/*
*   Class for slider when using native scroll on mobile
*/
.caast-slider__container-native {
}
/*
*   Wrapper for slider
*/
.caast-slider {
}
/*
*   Wrapper for slider inner content
*/
.caast-slider__track {
}
/*
*   Class for slider slide
*/
.caast-slider__slide {
}