The Henry - Design System 🎨

Welcome

This is the design system where we can talk about the language of the website. This area is really an open canvas to test out anything that will work on the rest of the site.

For this site there will be no where near all of the components covered initially because it's a legacy website.

Colors

Background Colors

.bg-black-211
.bg-green-1f3
.bg-green-4a6
.bg-green-bac
.bg-green-d2e
.bg-green-e7e
.bg-white
.bg-transparent
.bg-black
.bg-grey-dad

Text Colors

.color-black-211

Well colour me black-211!

.color-green-1f3

Well colour me green-1f3!

.color-green-4a6

Well colour me green-4a6!

.color-green-bac

Well colour me green-bac!

.color-green-d2e

Well colour me green-d2e!

.color-green-e7e

Well colour me green-e7e!

.color-white

Well colour me white!

.color-transparent

Well colour me transparent!

.color-black

Well colour me black!

.color-grey-dad

Well colour me grey-dad!

Buttons

Button 1 .c-button-1 Button 1 Find Out More
Button 2 .c-button-2 Button 2 Find Out More .c-button-2--lighter

For use on slightly darker backgrounds.

Find Out More
Button 3 .c-button-3 Button 3 Find Out More

Typography

Display 0 .f-display-0

Display 0 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 1 .f-display-1

Display 1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 1b .f-display-1b

Display 1b Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 2 .f-display-2

Display 2 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 2b - Serif .f-display-2b

Display 2b Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 3 .f-display-3

Display 3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 4 .f-display-4

Display 4 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Copy 1 .f-copy-1

Copy 1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Copy 2 .f-copy-2

Copy 2 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Copy 3 Footer .f-copy-3

Copy 3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Icons

Labels

Label 1 .c-label-1

Coming Soon

Boxes

Cards

Concierge

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

‘A Retrospective’ by Liz Kilby.

One of our lovely residents at The Henry recently showcased her stunning leather work, which she has been perfecting over the past decades. The exhibition featured various items, including purses, wallets, bags, and many more creative items

Read More

The Henry Information Night

Join us for a presentation on our brilliant new residences, a village tour and a snapshot of today’s real estate market.

When Wed 27th September
Time 5:15pm arrival for 5:30pm start
Where The Henry Clubhouse

Card Grid

Lorem Ipsum

Concierge

We have a network of people and services tailored to respond to our residents’ requests.

Cafe & Bar

A welcoming space for residents to relax and socialise while enjoying a variety of refreshments.

Library

Our well-stocked library provides residents with a peaceful retreat to indulge in literature.

Multipurpose Room

Can serve as both a cinema for entertainment and a lecture hall for informative gatherings.

Calendar of Events

From trivia nights, local excursions and happy hours, there’s something for everyone.

Games Room

With pool tables and darts this is the perfect spot to catch up with friends.

Gymnasium

With a range of activities from Strength for Life classes to Yoga and Tai chi there’s plenty to keep you moving!

Wellness Centre

Our Mind (Grey Matters) program hosts diverse events including crafts and guest talks to stimulate your mind.

Treatment Rooms

Our treatment rooms are fit for skilled professionals, ensuring prompt and expert care for a swift recovery.

Banners

Room Switcher

Component 6040

Component 6040

Media

Accordion

What downsizing support do you offer?

What support do you offer when it comes to selling my existing home?

What amenities does The Henry offer?

When can I move in?

What types of activities and events are organised at The Henry?

Can I bring Fido or Mittens?

Can I have family and friends to stay for a few nights?

Can I smoke at The Henry?

Is The Henry age-restricted?

Can I have extra support and care while still living independently?

Helper Functions

Array argument validation is_arg() and get_arg()

This is great to help you pass functions between template parts.

e.g. get_template_part('template-parts/component','animals', $animals_args);

Template Part - section-zoo.php

/*------------------------------------*\
	# EXAMPLE ARRAY
\*------------------------------------*/

$animal_args = array(
	'animals' => array('dog', 'deer', 'cat'),
	'title' => get_field('title'),
	'sub_title' => 'Animals'
);

get_template_part('template-parts/component','animals', $animals_args);

Template Part - component-animals.php

/*------------------------------------*\
	# EXAMPLE OUTPUT
\*------------------------------------*/

$is_title     = is_arg('title', $args); // This will return false because get_field('title') doesn't exist.
$is_nothing   = is_arg('something', $args); // This will return false.
$is_animals   = is_arg('animals', $args); // This will return truthy as an array.

$sub_title = get_arg('sub_title', $args); // This will return 'Animals'.

$animals = get_arg('animals', $args);

if($animals && is_array($animals) ) {
	foreach( $animals as $animal ) {
		echo $animal;
	}
}

Attribute output from associative array get_attributes()

This is used in component_button() to add more attributes that don't have specific arguments.

$attributes = array(
	'data-url' => 'http://lateralaspect.com.au',
	'data-id' => 'latasp',
);

get_attributes( $attributes );

Returns: data-url="http://lateralaspect.com.au" data-id="latasp"


Keep Me
Updated

Keep up to date with everything The Henry, including important information and upcoming open days.