# Featured Flip Cards

**URL:** https://meta.discourse.org/t/featured-flip-cards/194360
**Category:** Theme component
**Tags:** deprecated
**Created:** [June 18, 2021, 10:32pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360 "2021-06-18T22:32:39Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 18, 2021, 10:32pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/1 "2021-06-18T22:32:40Z")

</div>

A modification of the [Featured Tiles](https://meta.discourse.org/t/featured-tiles-theme-component/156677/26) theme component. Displays featured topics in a row of flip cards:

As the cards shouldn’t get too big or too small, the component uses breakpoints for different window dimensions. It basically shows two cards on mobile, four on tablet and five or six on desktop. You should at least feature six topics.

In any case, it’s more fun if you have some more and use the _randomize_ feature:

![Screenshot from 2021-06-18 21-06-49](https://global.discourse-cdn.com/meta/original/3X/b/d/bd53bb68ddeae18b867aa44a965b1d51350a1f82.png)

That way you’ll always get a new spread of cards 🃏

| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [discourse-featured-flip-cards](https://github.com/nolosb/discourse-featured-flip-cards) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [June 18, 2021, 11:31pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/2 "2021-06-18T23:31:56Z")

</div>

Looks nice! FYI this happens in Safari:

Any chance for a square crop option? It doesn’t look great with different aspect ratios, or maybe a blurred version of the image behind it similar to what Topic Thumbnails does? Just throwing out ideas for you 👍

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 19, 2021, 12:57am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/3 "2021-06-19T00:57:06Z")

</div>

Yes, it’s not set up that flexible yet. So it’s great to get some feedback about possible use cases, thanks! I’ll play around a bit with a more polished look for photos to see how to best adjust styles.

Regards more options I added adjustable settings for the aspect ratio of the cards and how thumbnails should be resized:

 ![Screenshot from 2021-06-19 01-42-36](https://global.discourse-cdn.com/meta/original/3X/3/b/3b04ce6dc6101ac59e721e3c8ddb77f00966d563.png)

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [July 5, 2021, 7:51pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/4 "2021-07-05T19:51:12Z")

</div>

Any chance to increase the number of featured topics on mobile and enable horizontal scrolling? That would be awesome

---

<div class="post-metadata">

### Author: ![Bank\_Live](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bank_live/32/75893_2.png) [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [July 28, 2021, 12:43am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/5 "2021-07-28T00:43:52Z")

</div>

I have problem flip card not show on moboil.

Safari

 ![ภาพ](https://global.discourse-cdn.com/meta/original/3X/d/d/dd1858cd34287df5955f4603e5bcd3985d0e46fc.jpeg)

chrome

 ![ภาพ](https://global.discourse-cdn.com/meta/original/3X/2/3/23e3fcac0a51e780c7a57e170aa499822f3f734b.jpeg)

mywebsite

> **[อิเล็กอีซี่(Eleceasy)](https://eleceasy.com/)**
>
> "ดีเบตความคิด สู่การพิชิตยุคสมัย"

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [July 28, 2021, 8:00am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/6 "2021-07-28T08:00:14Z")

</div>

> [@Bank\_Live](#):
>
> I have problem flip card not show on moboil.

I can’t reproduce this on my site, but I see you have various components installed to show above the list area, and except “who’s online” none of them are displayed. Maybe look into this?

 ![Screenshot from 2021-07-28 08-55-38](https://global.discourse-cdn.com/meta/original/3X/5/d/5d7bb77f8292cb9d438f267fef3c0ed77b3e396e.png)

---

<div class="post-metadata">

### Author: ![Tom\_Eagle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_eagle/32/200481_2.png) [@Tom\_Eagle](https://meta.discourse.org/u/Tom_Eagle)
#### Post date: [July 29, 2021, 8:15pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/7 "2021-07-29T20:15:07Z")

</div>

I think this is somehow a issue with safari, as since installing this the only members having issues on our forum are using safari, which it seems @Bank_Live is using also.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [July 29, 2021, 8:35pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/8 "2021-07-29T20:35:57Z")

</div>

@Bank_Live’s site doesn’t display the component on chrome either. I don’t think that issue is related to the component, at least I can’t reproduce it.

But yes, there’s some css issues with safari and I can look into it in a week. Don’t have a mac at hand right now and can’t reproduce it on webkit on linux.

---

<div class="post-metadata">

### Author: ![Tom\_Eagle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_eagle/32/200481_2.png) [@Tom\_Eagle](https://meta.discourse.org/u/Tom_Eagle)
#### Post date: [August 12, 2021, 10:42pm UTC](https://meta.discourse.org/t/featured-flip-cards/194360/9 "2021-08-12T22:42:11Z")

</div>

Any news on the safari issue?

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [August 13, 2021, 1:43am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/10 "2021-08-13T01:43:54Z")

</div>

The component uses the aspect-ratio property. I thought it’s supported on Safari, but apparently only from the next release (15).

To make it work for now I added a quick fix to the settings. You’d have to add a calculated percentage and then the aspect ratio will be simulated with a CSS hack:

 ![Screenshot from 2021-08-13 02-31-01](https://global.discourse-cdn.com/meta/original/3X/b/7/b71588ef79c027f4dc827af5a3fb5733ae3dc084.png)

---

<div class="post-metadata">

### Author: ![Tom\_Eagle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_eagle/32/200481_2.png) [@Tom\_Eagle](https://meta.discourse.org/u/Tom_Eagle)
#### Post date: [August 14, 2021, 11:41am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/11 "2021-08-14T11:41:00Z")

</div>

Thank you! Works a charm on our community  
 ![Season 2 Dancing GIF by The Fresh Prince of Bel-Air](https://global.discourse-cdn.com/meta/original/3X/9/3/93b69a8f41a8eb5a084c90b30a19c68c36cc8434.webp)

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 22, 2023, 10:06am UTC](https://meta.discourse.org/t/featured-flip-cards/194360/12 "2023-01-22T10:06:53Z")

</div>

Feature Request.

Can we have an Option to have this displayed on A Specific category page?

ie if viewing Lounge featured cards are shown here.

the image shown is Category Image. I am using Air Theme. Application to show featured topics related to that category from it’s subcategory Frontier news.

what is recommended image size for Card image?

> [@Featured Topics](https://meta.discourse.org/t/featured-topics/217580/27):
>
> Feature Request.
> 
> Can we have an Option to have this displayed on A Specific category page?
> 
> ie if viewing Lounge featured cards are shown here
> 
> ![Screenshots_2023-01-22-05-54-20](https://global.discourse-cdn.com/meta/original/4X/e/3/7/e376a58848a9ca6dbe460388cf73f6d23c362448.jpeg)
> 
> the image shown is Category Image. I am using Air Theme. Application to show featured topics related to that category from it’s subcategory Frontier news.
> 
> what is recommended image size for Card image?

This is my idea on an application to show featured topics Above a specific category of interest.

I am using Air theme. It will need to either or rather maybe have option setting to be below category logo. And if possible to have option to show in multiple selected categories.

Ie I have main Category with a couple of subcategories that I would like to showcase the News subcategory
