← All elements
<div class="sm"><span>Revenue</span><b>$48.2k</b><em>▲ 12.4%</em><i></i></div>About this card
A dashboard tile with a big number, a trend chip and a sparkline drawn using a clip-path polygon.
How it works
The sparkline is not an image. A gradient filled block is cut by clip-path polygon into a jagged area chart shape and pinned to the bottom of the card. The trend chip is a small pill with its own tint.
Ways to customise it
- Edit the polygon points to draw another trend.
- Change the green to red for a falling value.
- Replace the figure and the label.
Good to know
A decorative chart should not be the only place the data appears, so keep the number in text. Add a text explanation of the trend for assistive technology if it matters.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.