Sparkles

Sparkling spinning stars of loveliness

How we design them

  • There are two types of sparkles - fine and chunky
  • These sparkles have 4 sizes:
    • Small
    • Medium
    • Large
    • Huge
  • The fine sparkle has a sparkle animation, which rotates and changes size
  • The chunky sparkle has a spin animation

How we use them

  • Add the class gg-c-sparkle to an element.
  • Choose one of the sparkles:
    • Fine sparkle, using the class gg-c-sparkle-fine
    • Chunky sparkle, using the class gg-c-sparkle-chunky
  • Choose the size of sparkle you’d like by adding the class gg-c-sparkle-{sparkle-choice}--{size} into your class declaration, replacing the {sparkle-choice} with your chosen sparkle (fine or chunky) and the {size} with your chosen size.
  • Do not include any text inside the element with the sparkle classes on, as this will cause the text to spin too.

Designed for inclusion

  • For users who prefer reduced motion, the sparkles won’t rotate and change size, they will be static

How they look

Fine sparkle

  • These sparkles must be placed on a non-white background, otherwise they won’t be visible
  • Choose a strong colour for best contrast
  • These sparkles work best on a black background, but also work nicely with yellow, light-pink, light-blue, and light-green
  • Other colours are allowed, as long as the contrast is sufficient for the sparkles to display
View demo Open in new window
Open in new window
320 x 568
View code 
    
<p>Small</p>
<div class="gg-c-sparkle gg-c-sparkle-fine gg-c-sparkle-fine--small"></div>
<br>
<p>Medium</p>
<div class="gg-c-sparkle gg-c-sparkle-fine gg-c-sparkle-fine--medium"></div>
<br>
<p>Large</p>
<div class="gg-c-sparkle gg-c-sparkle-fine gg-c-sparkle-fine--large"></div>
<p>Huge</p>
<div class="gg-c-sparkle gg-c-sparkle-fine gg-c-sparkle-fine--huge"></div>

Chunky sparkle

View demo Open in new window
Open in new window
320 x 568
View code 
    
<p>Small</p>
<div class="gg-c-sparkle gg-c-sparkle-chunky gg-c-sparkle-chunky--small"></div>
<br>
<p>Medium</p>
<div class="gg-c-sparkle gg-c-sparkle-chunky gg-c-sparkle-chunky--medium"></div>
<br>
<p>Large</p>
<div class="gg-c-sparkle gg-c-sparkle-chunky gg-c-sparkle-chunky--large"></div>
<br>
<p>Huge</p>
<div class="gg-c-sparkle gg-c-sparkle-chunky gg-c-sparkle-chunky--huge"></div>