# Birthstones

Chapter 12 of the Clasp user guide.

A stone for every month is how many jewelry gifts are chosen. The **Birthstones** section is a band of twelve small cabochons, one per month: each a round gem drawn in the stone's color (or your own photo of the stone, cropped round), with the month under it in the heading font and the stone's name. The **current month**, by the shopper's own clock, sits on a small card with a gilt ring around its gem and "This month" under it, and screen readers hear "(this month)". Each month links where you choose, such as a birthstone collection. On phones and tablets the months become a row that shoppers swipe, scrolled so the current month is in view.

| Setting | Default | What it does |
| --- | --- | --- |
| Kicker, Heading | "Birthstones", "A stone for every month" | Your words |
| Colour scheme | Champagne band | Champagne band, Page or Lining band |
| Highlight the current month | On | Marks the shopper's current month |
| Current month label | This month | Under the current month's gem |

Up to twelve **Month** blocks (the section starts with all twelve):

| Setting | Default | What it does |
| --- | --- | --- |
| Month | January | January to December. Month names follow your store's language. |
| Stone | Garnet | The stone's name, under the month |
| Stone colour | #9b2335 | The gem's color. The preset: Garnet, Amethyst, Aquamarine, Diamond, Emerald, Pearl, Ruby, Peridot, Sapphire, Opal, Citrine and Turquoise. |
| Image | Empty | Optional gem photo, cropped round, instead of the drawn gem |
| Link | Empty | Where the month goes, such as `/collections/birthstones` or a collection per month. A month without a link isn't a link. |

The current month is set in the shopper's browser, never stored in the page, so it is always right, even on a page served from cache. With no Month blocks the section shows nothing on your storefront.