SpectrumCard truncates description text > No luck with dynamic expansion

[sweet-fl]

Hey, everyone! I'm working with the SpectrumCard component and facing an issue with the description field. For the value of this field, i've set {{ Repeater.orders.order_details }}. When the description contains more than one line of text, though, the card truncates it and i can't display more than 2 lines of text (i get ... at the end after this).

I've inspected the element and what seems to be the issue is that overflow was set to hidden (both overflow-x and overflow-y) and also webkit-line-clamp was set to 2 and webkit-box-orient was set to vertical. When i corrected them in the inspect field to visible for the overflows and unset for the webkits it worked just fine, but i can't adjust this via the Custom CSS option.

Could you help with this? Ideally, i'd like to have a limit of 5 lines set to be the max lines to be displayed by default and then a button to expand the rest of the text recorded within {{ Repeater.orders.order_details }}. Not very tech-savvy so would very much appreciate your assistance with this. Thanks in advance!

[sweet-fl]

hey! anyone who could help with this? 😢

[mikesealey]

Hey @sweet-fl - The SpectrumCard is only meant for displaying a simple overview of data; I like to use it to display Name, City, and Employee Level from the Employees table in the Budibas sample data.

If you're looking for something more customisable, your best bet would be to add a container and nest some components like Headline and Paragraph inside it, and then make use of the styling to imitate the SpectrumCard (or however you wish).