Card CollapsibleReady

Card collapsible is designed to organize related content in a space-efficient way. It allows users to expand or collapse sections.

Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
View RTL
<template>
  <CardCollapsible title="I am a collapsible card">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident
    aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam
    totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,
    quibusdam?
  </CardCollapsible>
</template>

Usage

This section includes guidelines for designers and developers about the usage of this pattern in different contexts.

Do

  • Use it when users need to view multiple sections simultaneously.
  • Use it to streamline pages and minimize scrolling, especially for non-essential content that doesn’t require immediate interaction.

Don’t

  • Avoid using collapses when users need to switch quickly between sections, as it may push other content down.
  • Avoid nesting collapses, as multiple layers of hidden content can create a tedious and frustrating user experience.

Integration

This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).


Troubleshooting

If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page