Cards
Cards have multiple types, card (default), page, article, button, with more likely to be added. Each is likely to have its own variations.
For example the default card has colour variations using primary, secondary, and tertiary. Additionally it has a
colour-title
attribtute to match the title to the button colour. Example usage would be
<x-card.primary></x-card>
for the primary card, and
<x-card.secondary colour-title></x-card>
for the secondary card with matching colour on the title and button.
Card
card / primary
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
Additional text with link
card / secondary
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / tertiary
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / primary
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
Additional text with link
card / secondary / colour title
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / tertiary / colour title
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / primary / icon
card / secondary / icon
card / tertiary / icon
Well-being essentials 123
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
Page
card / page
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / page / border
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
card / page / border / cta
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto
Article
Used for news, events and various articles.
card / article
card / article
Patron This Esme visits our Scottish Centre
Equestrian influencer and YouTube star This Esme visits Belwade Farm, Aberdeenshire
card / article
Willow weaving Christmas angels
Penny Farm, Preston New Road, Blackpool, Lancashire, FY4 5JS
Horizontal
card / horizontal
Book your visit now
Booking is essential - to book your slot, you'll just need to select the date you would like to visit the farm and the number of adult and child tickets required.
Find out more and book your visit now.
Book your visitFeatured
card / featured
Button
card / button
Cards at varying widths
The same card components can be used for narrow and large widths. This is achieved by setting rules for minimum and maximum image heights.
Card 1/2 width
card / secondary
Card 1/4 width
card / primary
Card title and link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula metus mauris, at dignissim lectus aucto