topic Re: Reposition Elements in Card in Calcite Design System Questions

Reposition Elements in Card

AbdulRaufs — Wed, 31 Jan 2024 05:33:50 GMT

I am working on this codepen. Urban Tree Map V2 (codepen.io)

A dynamic website showing top 5 species by count and loading the information in Card. Currently all the card elements are left aligned. I want the first two elements (image and Tree Species) left aligned while the count and the switch button to right.

I have tested many element properties in developer mode of edge but unable to get desired results.

Please help.

Regards,

Re: Reposition Elements in Card

KittyHurley — Wed, 31 Jan 2024 20:09:40 GMT

Its possible the List and List Item may be better suited for your use case - both components offer more configurability options via attributes and slots, and could provide usability and accessibility improvements.

For instance: https://codepen.io/geospatialem/pen/mdoxyyG

Re: Reposition Elements in Card

AbdulRaufs — Thu, 01 Feb 2024 23:48:05 GMT

Hi, thank for your support. I was finding it difficult to implement list on my page with the structure I currently have. I tested some more, and I managed to get the desired result by adjust the width of label rather than trying to move chip and switch elements to right.

Hope the longest Species name fits in 300px :).

Thanks and Regards,