Circle Statistics
Circle stats are circular containers for small amounts of text, generally numbers, but they do have the option to contain text and icons. The are unique in that the circle and text inside will scale itself up to be as large as it can while leaving a comfortable amount of space within the circle.
Single Elements
If you are placing a single text element or icon, the default setup for these elements should work just fine for you. Basically you have two parts.
- A div with the class
circle-statand abg-[color]class - A div inside no required class that holds the content
Even if text is more than a single character, you will see how the text will scale to fit inside the element and look good.
Multiple Lines
Multiple lines of text can work, but sometimes the default scaling can result in unexpected results and sometimes even crashing Javascript, especially when used in conjunction with a counter. This component was designed for single elements. You can still use the same setup for ease, but you'll have to chose a text size that works for your needs using responsive classes. To prevent the text resizing, add the class circle-stat-text.