# Placing Symbols \\ Letters on a colored cards

**URL:** <https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375>\
**Category:** Ask for Help\
**Created:** [February 1, 2024, 4:26pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375 "2024-02-01T16:26:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [February 1, 2024, 4:26pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/1 "2024-02-01T16:26:52Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fc798f978f3b55d47f71928108c56e228b0d9810.png)

There was suitable Inline List in Legacy Classic App like this  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/0/408c5258428e664adbb57b5fb6603f6689d6342b.png)  
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 🙏

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 1, 2024, 4:57pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/2 "2024-02-01T16:57:31Z")

</div>

You could use Cloudinary or [dummyimage.com](http://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 …

---

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [February 1, 2024, 6:26pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/3 "2024-02-01T18:26:47Z")

</div>

> [@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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/19171ce3f67be584438f9a0c81d0927736c3471f.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 1, 2024, 6:29pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/4 "2024-02-01T18:29:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [February 1, 2024, 7:25pm UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/5 "2024-02-01T19:25:03Z")

</div>

> [@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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 2, 2024, 12:12am UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/6 "2024-02-02T00:12:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e122ebe5d31c92ca196f14cb610f578ffd81f3f3.png)

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [February 2, 2024, 2:41am UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/7 "2024-02-02T02:41:29Z")

</div>

Wow! Brilliant 😃 Thank you very much, @ThinhDinh 🙏

---

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [February 2, 2024, 4:31am UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/8 "2024-02-02T04:31:47Z")

</div>

@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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/39909226b9afe3896bd884f22b12469010cdc843.png)

using a Template Component

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fdc3665ab8d548d2a848a772ba472fb6e51da58f.png)

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 3, 2024, 12:18am UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/9 "2024-02-03T00:18:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [February 10, 2024, 12:19am UTC](https://community.glideapps.com/t/placing-symbols-letters-on-a-colored-cards/70375/10 "2024-02-10T00:19:00Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.