Roseland Holiday Cottages Brand Guide

Body Font:

Roboto

Heading Font:

Domine

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph with bold text, italic text, and a link.

This is small text for captions or footnotes.

This is highlighted text

"This is a blockquote. Perfect for testimonials or important quotes."
— Citation Source

Colours

Primary

--colour-primary

Primary Dark

--colour-primary-dark

Primary Contrast

--colour-primary-contrast

Secondary

--colour-secondary

Secondary Dark

--colour-secondary-dark

Secondary Contrast

--colour-secondary-contrast

Text

--colour-text

Border

--colour-border

Icons

Source: boxicons v2

Small:

Default:

Large:

Extra Large:

Buttons

Button Variants

Invalid email format

Button States

Button Sizes

Messages

Status Messages

class="icon-message" data-status="" based messages, for results from interactions

Error Message

Success Message

Warning Message

Information Message

Icon Messages

class="icon-message location" normal non status related messages
To be expanded as new use cases arise

Positive Message

Send Message

Location Message

Email Message

Form Elements

Text Inputs

Text Input Email Input Password Input Disabled Input

Textarea

Message

Select Dropdown

Select an option

Checkboxes

Checked checkbox Unchecked checkbox Disabled checkbox

Radio Buttons

Option A Option B Option C (disabled)

Date & Time

Date Time

File Upload

Upload file

Cards & Containers

Default Card

This is a standard card component with header and content sections using our card framework.

Featured Card

This card uses the .is-featured variant for emphasis.

Selected

This card uses the data-status="selected" variant for emphasis.

Error

This card uses the data-status="error" variant for emphasis.

Success

This card uses the data-status="success" variant for emphasis.

Layout Compositions

Flexbox Layout Patterns

.flex-row

Item 1

Item 2

Item 3

.flex-row .justify-end

Item 1

Item 2

Item 3

.flex-row .justify-center

Item 1

Item 2

Item 3

.flex-row justify-between

Left Item Right Item

.flex-row .justify-around

Item 1

Item 2

Item 3

.flex-row .justify-evenly

Item 1

Item 2

Item 3

.flex-row items-start

Item 1

Item 2

Item 3

.flex-row items-end

Item 1

Item 2

Item 3

.flex-row items-center

Item 1

Item 2

Item 3

.flex-row with align-self utilities

Start

Center

End

Stretch

.flex-column

Item 1

Item 2

Item 3

Grid Layout Patterns

.grid (auto-fit responsive)

Auto Item 1

Auto Item 2

.grid-cols-3 (fixed columns)

Col 1

Col 2

Col 3

.grid-equal (equal width columns)

Equal 1

Equal 2

Equal 3

Equal 4

Tables

Name	Role	Status
Jane Smith	Designer	Normal
Bob Johnson	Manager	Error
Bob Johnson	Manager	Success
Bob Johnson	Manager	Warning
Bob Johnson	Manager	Selected

Status Indicators

Badge Variants

Default Success Error Warning Neutral

Badge Sizes

Small Badge Default Badge Large Badge

Utility Classes

Text Alignment

Left aligned text

Center aligned text

Right aligned text

Visibility

This paragraph has hidden text for screen readers inline.