Cards with rich text

Hey guys,

is there any possibility to create cards with rich text? (see screenshot)

  • user specific data on the card
  • hover/tab area on card - show new screen


1 Like

You can do this using css.

@Pratik_Shah :+1:. Sounds good.

Where can I add the CSS - in the rich text component?

Yes, you have to create template column with user specific data and show this column in rich text component.

how do I create the reference from the rich text comp to the user data?

Use template column to write the code, and use that template in rich text

Hey guys,

I am trying to add now CSS to the rich text field, but I cannot figure out exactly how to modify the CSS so that the field actually displays what I want it to (see my screenshot above). I know I have to use both CSS and HTML. I think I must just be missing some small but important keystrokes in how to denote CSS vs. HTML in the field. Can you help me?

you forgot to add screenshot and code… you can find some samples here:

Hey @Uzo,

thanks for your help. I found this example created by you: Code BOOK - Desktop

From my understanding, this a style that is add to the list component, right? So not applicable to my needs.

I want to create a card with a background image. Title centered above image.

Code in the rich text component: (Picture is just placeholder)

How can I add the css styles?



you need to add a rich text component and paste the code there

I added the code in the rich text comp. The result is a background image on the top of the view.

Below is the rich text comp with HTML for the card, but no CSS.

Both don´t show the expected result. What is wrong?

if i remember good, this is for the tiles, not cards… try to change inline list settings

You can achieve this by using cloudinary. Add a text to an image | Cloudinary Cookbook

It may be a little confusing at the beginning but there are some good tutorials in the forum. Just browse for cloudinary text overlay.

1 Like

I second this. Once you get it to work it’s easier than having CSS for this use case.

1 Like