diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 7a3e5169d..6c810cd69 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -2,6 +2,7 @@
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
+{% load i18n %}
{% load static %}
@@ -18,6 +19,8 @@
{% endif %}
{{ item.name }}
- {{ item.short_description|default:'' }}
+
+ {% for tag in item.app.info.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 2a6f17903..e20277a6c 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -596,8 +596,8 @@ footer {
display: block;
line-height: 1.42857143;
text-align: center;
- width: 10rem;
- padding: 1rem;
+ width: 11.5rem;
+ padding: 1rem 0.5rem;
border: none;
border-radius: 0.5rem;
transition: border .2s ease-in-out;
@@ -619,10 +619,17 @@ footer {
margin-bottom: 0;
}
-.card-description {
+.card-tags {
font-weight: 400;
color: var(--bs-secondary);
font-size: 0.875rem;
+
+ /* Show ellipsis after 3 lines. */
+ /* Standardized in CSS Overflow Module Level 4 */
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
}
.card-icon span,