From 6a63e4069cf028752313fe8cc183b338252ee6b0 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Wed, 5 Aug 2026 00:39:05 +0200 Subject: [PATCH] Document Trending indicator and Card stamp (#2785) Co-authored-by: codecalm --- docs/pages/ui/components/card.mdx | 18 ++++++ docs/pages/ui/components/trending.mdx | 82 +++++++++++++++++++++++++++ shared/data/docs.json | 4 ++ 3 files changed, 104 insertions(+) create mode 100644 docs/pages/ui/components/trending.mdx diff --git a/docs/pages/ui/components/card.mdx b/docs/pages/ui/components/card.mdx index bee9f2e47..b20a91852 100644 --- a/docs/pages/ui/components/card.mdx +++ b/docs/pages/ui/components/card.mdx @@ -73,6 +73,24 @@ Add a status color to your card, either at the top or on the side of the card, t

Card with top status

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Card with side status

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

+## Card stamp + +Use a card stamp to put a large, faded icon in the top corner of a card. It is only a decoration, so it never covers the text and it does not react to clicks. + +Add a `.card-stamp` element as a direct child of the card, before the card body. Put the icon in a `.card-stamp-icon` element inside it. + + +

Card with a stamp

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur.

+ + +## Card stamp size and color + +Add the `card-stamp-lg` class to make the stamp bigger. Change the circle color with a `bg-*` class, and the icon color with a `text-*` class. + + +

Large stamp

The large stamp is a good fit for banners and wide cards.

Stamp on a color card

Use a white circle with a colored icon on a card with a background color.

+ + ## Stacked card Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect. diff --git a/docs/pages/ui/components/trending.mdx b/docs/pages/ui/components/trending.mdx new file mode 100644 index 000000000..229d26947 --- /dev/null +++ b/docs/pages/ui/components/trending.mdx @@ -0,0 +1,82 @@ +--- +title: Trending +summary: A trend indicator shows how a value changed. It joins the number with an arrow and a color, so users can read the direction at a glance. +description: Show value change with a trend indicator. +layout: '@layouts/DocsMdxLayout.astro' +--- +import Example from '@components/Example.astro'; +import Icon from '@ui/Icon.astro'; + +## Overview + +A trend indicator is a small inline element. It shows a number and an arrow next to it. Use it next to a metric, in a stats card, or in a table row. + +There is no dedicated class for it. Build it from utilities: `d-inline-flex` and `align-items-center` to keep the number and the icon in one line, `lh-1` to keep the line short, and a text color that matches the direction. + + +25% + + +## Variants + +### Direction + +Use three states to describe the change. Pick the color and the icon together, so they always tell the same story. + +| Change | Color | Icon | +| --- | --- | --- | +| Up | `text-green` | `arrow-up` | +| No change | `text-muted` | `minus` | +| Down | `text-red` | `arrow-down` | + + +25% 0% -12% + + +### Unit + +The unit is only text after the number. Use a percent sign, a currency, or no unit at all. + + +8% 4.2K -3 + + +### Size + +The indicator takes the font size of its parent. Put it in a heading or use a text size utility to make it bigger or smaller. + + +15% 15% 15% + + +## Examples + +### Next to a value + +Place the indicator after the number. Use `align-items-baseline` on the wrapper, so the number and the indicator sit on the same line. + + +
Today's sales
6,782
7%
+ + +### In a stats card + +This is the most common place for the indicator. The value stays on the left and the change on the right. + + +
New clients
1,352
-4%
+ + +### In a table + +Use it in a table cell to compare rows quickly. + + +
Product Sales Change
Basic plan 4,120 12%
Pro plan 2,043 -7%
Team plan 986 0%
+ + +## Accessibility + +- Keep the sign in the text, for example `-12%`. Users who do not see color still get the direction. +- The icon is hidden from screen readers, so it must not be the only carrier of meaning. +- Add a word like `Change` in the table header or near the value, so it is clear what the number means. diff --git a/shared/data/docs.json b/shared/data/docs.json index 329f2ecbb..689252b68 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -324,6 +324,10 @@ "title": "Tracking", "url": "/ui/components/tracking/" }, + { + "title": "Trending", + "url": "/ui/components/trending/" + }, { "title": "Vector Map", "url": "/ui/components/vector-map/"