.c-card-interactive
.c-card-interactive__element(
data-module="cardInteractive"
).bg-white.p-4.pt-8.flex.flex-col.relative.overflow-hidden
.c-card-interactive__header.absolute.z-1.bg-white.w-full.top-0.right-0.p-4.px-8
h3.text-base.font-400.px-2 {{ moduleName }}
.c-card-interactive__cards.flex.flex-row
Card(
v-for="(card, index) in cardArr"
:imageSrc="card.imageSrc"
:title="card.title"
:content="card.content"
:link="card.link"
:linkText="card.linkText"
:key="`card-${index}`"
)
.c-card-interactive__footer.border-top
.c-card-interactive__buttons.flex.flex-row.p-2.py-0
a(href="#").c-card-interactive__button--prev.border.border-4.border-primary.p-4.py-2.m-2.col.flex.justify-center Prev
a(href="#").c-card-interactive__button--next.border.border-2.border-primary.p-4.py-2.m-2.col.flex.justify-center Next
```jsx
const cardArr = [
{
title: 'Card title 1',
content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
imageSrc: 'images/music-image.jpg',
link: '/read-more/article-name',
linkText: 'View more'
},
{
title: 'Card title 2',
content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
imageSrc: 'images/music-image.jpg',
link: '/read-more/article-name',
linkText: 'View more'
},
{
title: 'Card title 3',
content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
imageSrc: 'images/music-image.jpg',
link: '/read-more/article-name',
linkText: 'View more'
}
]
```