a guide to

flexible components

stay in the moment!
own a holiday home with us
find out more
stay in the moment!
own a holiday home with us
find out more

Own a holiday home at New Pines

Download a brochure for New Pines

Book A Tour at New Pines Resort

the accordion

This component features multiple collapsed ‘drawers’ of content, each accordion section will allow for a title and full WYSIWYG* content to appear within the collapsable section. This means you can add text, bullets, buttons and links to name a few! 

The accordion is really useful for content such as FAQ’s, good for showing information at a glance so the user can get more information where relevant.

*see WYSIWYG at bottom of this page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The interactive map

call to action

This page shows the recommended different ways of using this block. Use the colour scheme dropdown to select from 4 colour ways and add content and buttons as required.

Primary button
purple
call to action

centre the content of this component and use the text link instead of the primary button.

secondary button
pre header if required
green call to action
button
light green
call to action

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA block
with an image

This is available in purple, lilac, green and light green as above. You can select whether to have the image on the left or right. As well as centre or left align your content.

button

download block

add your document title
download
and a relevant file
download
This is a standard form
be prescriptive, don't make your users have to think
form tab title
this is a natural language form
Perfect for

The social block

Add the social block to pages to pull through the relevant social channels per site. Use the colour scheme dropdown to choose between white, purple or lilac as shown below. White is set as default and will automatically pull through the coloured logo of the associated resort.

let's get social
follow us
let's get social

This is the text and image block. Use the text editor to choose whether to centre or left align your text. You can also decide whether the image sits on the left or right by using the image alignment dropdown.

this is a header 4

As well as selecting the alignment of the text and image on this component, remember you can also set the background colour. As a default, it will be set to white. Use the colour scheme dropdown to select lilac or purple. Button styles can be added too where clear CTA’s are required.

add button

or this button

this is a header 3

Remember to select the orange button styling when you have set the background to purple!

add button

the wysiwyg

Lead paragraph styling for intro paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

This is paragraph styling. You can make things bold. Or even italic to stand out. You can even change the colour, we recommend using the lilac or orange ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

This is a heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in link example velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute link example in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

For long chunks of text, use the read more button…Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sometimes you might want to make less of a statement, and add a smaller button – there is another button style for this, available in the same two colour options.

you can also add images

Option to add captions to images too!

 

If you do bullet points, they will look like this:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    • Nested children style (use tab to insert)
  • incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

*terms and conditions can be styled with the small text formatting. 

 

If you do a numbered list, it will look like this:

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  2. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    1. nested children style (use tab to insert)
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

“This is a block quote to pull out copy in articles and long blocks of copy, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum”

add source?

 

Option to select tick styled boxes to display copy, for example benefits. Remember to created a bulleted list first, and then use the lists dropdown within formats to select checklist

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quick links

Adding quick links is a great way of keeping users moving through the site, and linking them off to lots of pages, particularly on landing pages. To create quick links, make a bulleted list first, and then use the lists dropdown within formats and select quick links

Coronavirus (COVID-19)

Our resorts in Wales are now open to Wales residents and will be open to England residents from 12th April. All of our resorts in England and Scotland are currently closed due to Government restrictions. Our resorts in England are due to open on the 12th April.

find out more here