Premium element

ShowCase

Card Expand

Card Expand is an interactive layout component designed to create an accordion effect where cards expand or shrink based on user interactions.

Preview

¡Hello!

¡Hello!

Quick Setup

data-brx-accordion=true

Required

Adds the Card Expand effect to the container. Use this attribute on the main container to activate the effect.

data-brx-accordion-item

Required

Identifies each individual card within the accordion. This attribute is required on all items you want to expand or shrink.

Available Presets

data-brx-preset="preset-name"

Optional

subtle

Minimal expand/shrink effect.

normal (Default)

Moderate expand/shrink.

medium

Noticeable expand/shrink.

high

High expand/shrink effect.

extreme

Maximum expand/shrink effect.

Available animation

data-brx-animation="preset-name"

Optional

smooth

Soft animation with ease-in-out transitions.

bounce

Adds a bouncy effect, perfect for lively layouts.

fade

A fade-in/out effect with slight scaling.

swift

Fast, sharp animation for dynamic layouts.

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours