Placing Symbols \ Letters on a colored cards

[Alexey_Baranov1]

Hi gliders!

I broke my brains in a Quiz App attempting to bring text by symbols one by one, placed on colored cards.
Like this

There was suitable Inline List in Legacy Classic App like this

Here we can put a text over the image in Classic. But seems it’s impossible in Pages? I thinked about CSS, but Business plan is not for my use case(.

Also I do not know a way to have more then 4 items in a line (need 10+).
Maybe is there some workaround? E.g. using Rich Text Component with some aka “color feature” for each letter? Or something else?

Thank you for any ideas

[Darren_Murphy]

You could use Cloudinary or dummyimage.com to create the images.
You could get 10 in a line using a HTML table in a Rich Text component, but they wouldn’t be individually clickable. Do they need to be?

Assuming yes, I think the best you could do is play around with multiple image components inside containers of various sizes. Or perhaps an XS Grid collection …

[Alexey_Baranov1]

@Darren_Murphy

a HTML table in a Rich Text

Thank you Darren

I understand about Dummyimage. The problem in Collection case is only for 4-5 items in XS Grid( But we need to see a Word in one line without scrolling…

What do you mean “HTML table in a RTC”? Or where can i read this?
Clickability is questionable yet.

I attempted to use a multiple image components inside containers, but unfortunately can’t see the solution

[Jeff_Hager]

Basically you would need to create an HTML table to contain your letters, then display it with an RTC, but you wouldn’t be able to click on each letter individually.

Not sure I have a good solution for this.

[Alexey_Baranov1]

@Jeff_Hager

HTML table to contain your letter

Thank you Jeff!
How can i take HTML Table with colored letters or letters on colored background?

[ThinhDinh]

Here’s a sample HTML snippet for you to play with.

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">M</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">A</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">N</td>
    <td style="width: 50px; height: 50px; background-color: #FF0000; font-weight: bold; text-align: center; font-size: 32px; color: #FFFFFF;">C</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">S</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">E</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">S</td>
    <td style="width: 50px; height: 50px; background-color: #00FF00; font-weight: bold; text-align: center; font-size: 32px;">T</td>
  </tr>
  <tr>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">M</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">A</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">N</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px; color: #FF0000;">C</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">S</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">E</td>
    <td style="width: 50px; height: 50px; background-color: #FFFFFF; font-weight: bold; text-align: center; font-size: 32px;">S</td>
    <td style="width: 50px; height: 50px; background-color: #808080;"></td>
  </tr>

[Alexey_Baranov1]

Wow! Brilliant Thank you very much, @ThinhDinh

[Alexey_Baranov1]

@ThinhDinh, @Jeff_Hager,
I have a similar question about possibilities of HTML coding when using Web Embed Component also.
I use WEC to show a Timer\Countdown generated by HTML-call

using a Template Component

But it diisplays with too extra height spacing even i choose smallest WEC height on it’s Options.
And the Question is maybe is it possible also to use HTML code to embed target iFrame without extra spacing on height?
Seems

[ThinhDinh]

I was replying to you on the other thread. CSS might be the most straightforward fix but since you’re not on Business/Enterprise, I can’t think of another way to fix it.