Thx for the update! 
WIth some CSS hacks I moved the avatar as a layover over the thumbnail in card mode:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
How can I reduce the height of the (purple) topic author div to 0 and effectively remove the gap while still displaying the avatar?
If you’re writing custom CSS, then rather than adding code that overwrites one of the pre-set layouts, I’d actually recommend you pick None as layout option in the theme settings and declare your styles from scratch.
For example, you could copy the default Cards stylesheet and declare the featured-topics__topic-details container as a grid. Then you can position it’s elements exactly as you like, rather than moving them around with absolute declarations.
That’s a great idea!
For now, we are happy with the template and just a few little CSS tweaks to initially test it. Once we get to CTR optimization phase, we will probably follow your advice. 
Not sure if this is expected behavior or if it could be considered a bug:
When three topics are set in the settings, but only two are displayed, a gap appears where the third topic should be. It would be ideal if the cards were resized to fill the entire width in such cases.
If anyone is interested in using horizontal scroll on mobile, here some CSS that “I” came up with (with the help of AI). It also includes some scroll snap and size adjustments that I found more suitable for our use case.
PS: I also tried to make some navigation pills without adding HTML, but that definitely was a stretch.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* Side padding for neighboring card visibility */
gap: 1rem; /* Consistent spacing between cards */
overscroll-behavior-x: contain; /* Prevent overscroll interference */
scroll-behavior: smooth; /* Smooth scrolling */
scrollbar-width: none; /* Hide scrollbar */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* Hide scrollbar in WebKit browsers */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* Narrower cards for side visibility */
min-width: 280px; /* Minimum width for small screens */
scroll-snap-align: center; /* Center each card when scrolling */
height: unset !important; /* Consistent height */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
Hi, thanks a lot for this component, love it!
Can someone by chance help with adjusting the title size as it’s too big right now?
I got an error message saying this component needs updating for compatibility with upcoming Discourse core changes. Does anyone know if an update is planned?
I updated the component earlier this year. You need to re-install to use the new version, see: 
Featured Topics - #38 by nolo
Oh, thank you so much, it worked!
The only thing I cannot fix (I’ve been teasing Chat GPT for an hour I guess…) is the cards’ height — any tips how I can reduce/remove it?
Hi Manuel - is there a way to get your awesome Theme Component here to ignore images (so it just shows an excerpt instead)?
I’ve got quite a few featured topics without images (which I want to feature), but they look pretty bad next to the ones that contain images. Also, I’m more interested in the text than the images.
The component template renders a variety of content available on a topic. The final look is then adjusted with style rules. E.g. when you select “cards” as layout, topic excerpts are hidden when there is a featured image and shown whenever there is none:
If you always want to show the excerpt and never show an image, you can either select “none” for Layout and add your own stylesheet. Or overwrite the rules on the cards layout that show the image and hide the excerpt.
I think this is a great component!
I admit I had spent two or three days attempting to learn to create a theme component to do exactly what this component does. I don’t feel that was wasted time because I learned a lot but I do wish I had followed ask.discourse’s advice sooner and checked out this component.
One thing I can’t figure out
I like the card layout but would like to show a thumbnail and an excerpt in the card layout. Any clues would be appreciated
Instead I’ve landed on the list layout but wanted to change a few things. I’ve added them to my common.css tab. Maybe this will help someone else
to remove the topic tag
.featured-topics__topic-tag {
display: none;
}
to remove the author avatar
.featured-topics__wrapper .topic-author {
display: none;
}
to remove the category link
.featured-topics__wrapper .category-link {
display: none;
}
Edit to add:
I’ll leave the original post above intact but I wanted to add
how to make excerpt show in card view
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
Also, I’ve come to like the list view layout on desktop better then the card layout but it looks horrible on mobile. The thumbnail is on the left and the title and except is in a narrow column on the right. I haven’t figured out how to make the text wrap around the thumbnail or stack everything in a single column.
Since I figured out how to get the thumbnail and excerpt to show in card layout which looks decent on mobile, I’ve switched to that layout because I suspect most users are viewing the site on a phone
This is a great component and plugin, thanks for you work!
However, there seems to be an issue with the contents not refreshing, unless I do a full page refresh, by pressing F5.
As an example:
I create a topic with the featured tag.
I go to the homepage by clicking on the website banner.
The topic should be under ‘Featured Topics’, but it’s not showing.
It only shows up, if I do a page refresh via the F5 key. Even if I click the banner again, it won’t show up.
Same thing if I delete a featured post. It will only go away, if I refresh the page via F5 or if I close the tab and open the page again.
Any ideas why this happens?
This is by design. The content isn’t dynamically updated, it reflects the state at page load. Typically it’s not an issue as the content will be up-to-date for any new visitor to the site.