Note:
There is no Carousel Drupal component in Bifrost.
But we have an implemenation of Slick carousel.
Please read the Drupal implementation example in Docs tab.
{% set card = {
badgeColor : 'dark',
image : {
src : '/images/_docs/abstract-background.png',
alt : 'iPhone 12 Mini',
badgeIconName : 'security'
},
title : 'iPhone 12 Mini',
detailsColors : [
{ value :'4B4A46', name : 'Lorem' },
{ value :'2C4651', name : 'Ipsum' },
{ value :'D4BBA5', name : 'Dolor' },
{ value :'C0C0C0', name : 'Amet' },
],
detailsStorage : ['128 Go', '256 Go'],
price : {
upperTitle : 'From',
dollar : '86',
cent : '99',
details : '/month',
},
note : 'Plan + Phone: from $150/month (24 months) No upfront payment',
buttons : [
{
label : 'Configurate',
hierarchy : 'primary-alt',
href : 'www.videotron.com',
}
],
} %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% include '@bf-components/card/twig/phone.twig' with card only %}
{% if items is not defined %}
{% set items = [
{imgSrc:"https://source.unsplash.com/800x400?nature&auto=yes&bg=777&fg=555", imgAlt:"Here is my title"},
{imgSrc:"https://source.unsplash.com/800x400?nature&auto=yes&bg=777&fg=555", imgAlt:"Here is my title"},
{imgSrc:"https://source.unsplash.com/800x400?nature&auto=yes&bg=777&fg=555", imgAlt:"Here is my title"}
] %}
{% endif %}