On feature / topic pages the page title displays over the top of the carousel.
The carousel above contains deals (custom and system) and inspirational text. The bookmark meta data text will show what the overlay content is.
Designer note: - Inspirational text not used when page title is over image... Too many messages on the image. Single mindset principle.
This should be expanded on mobile with a link to see more after the first 3. It can have both images and video which are two different tabs on desktop. This is used in the business listings and UGC content too.
The bookmark information is data pulled from the image. If the image doesn't have a region added then the bookmark will not show. The caption to the side of the bookmark is image data.
Designer note: This can be used to create the river layout by having the bookmark and text to the left or the right.
Module note: Designed to sit on its own row when the bookmark is showing. Not to share the row with another module.
Designer note: Images to not sit under each other, but broken up by a bit of text. This helps create the river layout feel which is key to the brand.
Bite sized information assised by images is a principle from the TNZ brand team
The bookmark can be top left, bottom left, top right, bottom right. You also have the option to turn the bookmark off. Turning the bookmark off will be demonstrated further down this page.
Designer note: brand is to keep the bookmark as it shows 'place'. It is also what creates the river layout
I have run out of things to say, but just to demonstrate the text seporating images
Below is an example of the bookmark turned off. The admin portal has it the image set to the grid, so it will sit at 1200 max width. The image caption still shows under the image. It should not run 100% of the image as it is too long to read.
Images with no bookmark can also sit two in a row. This however doesn't happen much.
There is a 'safe' list of logos that TNZ use for campaigns. When you choose a logo module it chooses from this safe list. These have been miss-used, so this has a lot of other logos too. Would be great if this list was cleaned up. when there are multiple logos in a module they should sit next to each other rather than one under the other.
Designer note: when logo sits next to text, have the text 2/3 and the logo 1/3 in the admin portal. This will ensure that the text sits in the central column as per design system. Each logo is in black and white so that it can sit on the page or on a black overlay.
You can update the video placeholder image. Videos can have the video title sit over the top either top left / right or bottom left / right. Default for video is to sit in the grid, but it can be updated to be 100% width.
Video set to the grid with the video title on the right. You can not add an alternative placholder image to a video module. You can however change the placeholder image at the asset level.
The module below is set to be 100% width of the page using the admin portal layout view.
This module is a way to see more images at once without the need to scroll. It has inspirational text for a brand element.
Design note: The idea behind this module is to show contrast, texture,
Gallery Plus modules were designed to have up to 9 images in the grid to provide more interest. There are an additional 2 renders to come one housing 6 and the other 9. In the mean time you can add multiple images to the gallery and even though only 4 show in the closed grid, you can scroll through all the items when you open the gallery.
The gallery below includes video and a portrait image.
This usually lives at the top of the page as the hero image. The one at the top of this page demonstrates what it looks like with the page title over the image. It also shows the variations in one carousel. The items below are to show what they look like broken out to display what the module can do at a glance.
Note: This modues is 100% width only
Carousels with inspirational text over the top are generally the hero images for brand story pages (Rauru) and campaign pages. These page templates don't have a page title that sits over the top of the carousel.
Inspirational text sets the tone for the river layout as it has words pointing out to the left or the right.
Default Carousel / Single Image
Default Carousel / Multi-image / left-aligned blocks
Default Carousel / Multi-image / right-aligned blocks
Images Only Carousel / Single Image
Image-only Carousel / Multi image / left-aligned blocks
Image-only / Multi image / right-aligned blocks