Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Counter - Component

FlushUsing Highlight Colors
View full screen
Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
<span class="counter__count">{{ data.count }}</span>
{% include data.icon %}
</div>

Output

<div class="counter">
<span class="counter__count">69</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>

Information

A simple icon and count pair that by default, will match action items, such as the button. Utility classes can be applied to present custom coloring though, seen on the "Using Highlight Colors" variant.

Use the "Flush" variant to remove background and padding.

Key links

  • Sass File

Variants

Flush

View full screen
Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
<span class="counter__count">{{ data.count }}</span>
{% include data.icon %}
</div>

Output

<div class="counter" data-layout="flush">
<span class="counter__count">69</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>

Using Highlight Colors

View full screen
Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
<span class="counter__count">{{ data.count }}</span>
{% include data.icon %}
</div>

Output

<div class="counter t-bg-highlights-magenta t-color-shades-light-bright">
<span class="counter__count">69</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.