One set of components, McCaskie's own colours
Everything below is plain HTML in a Code Block. Wrap anything in <div class="mc"> and the styling applies — nothing outside that wrapper is affected. Copy a block, change the words, done.
Cards — div.mc-tiles > div.mc-tile
Standard card
Blue top rule. Drops to one column on a phone by itself — no settings to change.
Read moreNumbers — div.mc-stats > div.mc-stat
Navy panel — div.mc-panel
For the thing you want people to actually read
Use it once or twice a page, not five times. Bulleted lists inside it use the same markup as anywhere else.
- Drop bullets — ul.mc-drops, orange diamonds.
- They work on white and on navy.
- Keep each one to a line where you can.
Two columns — div.mc-two
Left
Two equal columns that stack on a phone. Put anything in them — text, a list, a button, a table.
Orange call to actionRight
- Rough herd size and calving pattern
- Age and type of the current parlour
- Who does the milking now
Small print uses p.mc-muted.
Spec table — table.mc-spec
| Label | Value. The label column is fixed at a third of the width. |
|---|---|
| Second row | Rows are separated by a hairline, not a box. |
| Placeholder | Anything still to confirm: [waiting on Chris] |
Facts box — div.mc-facts
| Farm | A tinted box with an orange edge — good for a summary at the top of a case study. |
|---|---|
| Use for | Key facts, at-a-glance figures, an address block. |
Pull quote — blockquote.mc-quote
“A customer's own words carry more than any claim we could write ourselves.”Attribution goes in a cite tag
Numbered process — ol.mc-steps
First stage
Numbered navy circles down a timeline. Good for a process, an order journey, or what happens after an enquiry.
Optional timing label: span.mc-timeSecond stage
The line stops after the last item on its own.
Third stage
Add as many as you need.
FAQ accordion — details.mc-faq
Does this need any JavaScript?
No. It is the browser's own details/summary element, so it works on every Squarespace plan and Google can read the answers even while they are closed.
Can I add Google FAQ rich results?
Yes — the same FAQPage JSON-LD used on the robotic milking pages, pasted into Page Settings › Advanced › Page Header Code Injection.
Will it clash with the rest of the site?
No. Every rule starts with .mc, so nothing applies unless you wrap it in that div.
Call to action — div.mc-cta
Close every page with one of these
Name, job title — phone · email
Address, opening hours, anything else in small print.
How to use it
- Add a Code Block, mode HTML, "Display Source" off, and drag it to the full row width.
- Wrap your markup in <div class="mc"> … </div>. Nothing styles until you do.
- Type is inherited from Website Styles › Fonts, so the kit follows the site if the fonts ever change.
- Colours live in one line at the top of the CSS — change --mc-orange once and every orange on the site follows.
- The Fullwood pages keep their own .fw kit. The two do not touch each other.
The stylesheet lives in Website › Website Styles › Custom CSS, in the block headed "McCaskie style kit".