Basic Content Layouts

When building a page using the Subpage Layout system - each module on a page is represented by a published child page. Basic Content Layouts are used to load basic content subpages into different layouts activated via a page tag layout:XXX.
These are the various layout options available when using the subpage_layout system.

Activated by page tag layout:banner-link on a basic subpage. It will render a gold banner link with a pattern on the right side. It loads in the basic subpage headline followed by the basic page content.

NOTE: This module was specifically created for the /language-planning page - directing users to submit their own Language Planning event. The URL is hardcoded to the English site's event submission form. If this is a layout you would like to use elsewhere on the site - please contact For Purpose and we can modify to allow custom URL.

layout:checkered-panels

Activated by page tag layout:checkered-panels on a basic page. It will display the basic page headline as centered - followed by the basic page content. Below we render alternative yellow and purple checkered panels of varying widths.

Data Mappings:

layout:feature-banner

Activated by page tag layout:feature-banner on a basic subpage. It will display the meta image as a full page banner image. Underneath the page headline and the basic page content will be displayed underneath - with a pattern along the bottom.

layout:featured-page

Activated by page tag layout:featured-page. It can be added to a variety of page types. It will display an image on the left and text on the right. The text includes the headline, description, and a button link.

If this layout is applied to a basic page - the button link URL will be pulled from the excerpt field.

If this layout is applied to a blog page - it will load in the headline, meta image, and content of the most recent blog post. It will link to this newest blog post.

If this layout is applied to a blog post or event page - It will display the page headline, the page content, and the button will link to the page.

Activated by page tag layout:featured-tiles on a basic page - two tiles will be rendered for nested basic pages (each with a nested redirect page).

Data Mappings

Activated by page tag layout:home-header-featured-tiles on a basic page. The attached image will appear as a full width header banner with a pattern overlayed on the left side. The basic page content will appear below it ("Nau mai..."). Then it is expected that there are two basic child pages (each with a nested redirect page) that will render tiles.

Data Mappings:

layout:home-nga-tohu-banner

Activated by page tag layout:home-nga-tohu-banner on a basic page. This module layout appears on a black background. The attached image is loaded into the left with the basic content on the right in white. Hyperlinks given the btn class will appear as gold text with a gold outline. On mobile the logo will stack on top of the content. On mobile the content will be centered

layout:home-te-wiki-banner

Activated by page tag layout:home-te-wiki-banner on a basic page. This module layout appears on a black background. The attached image is loaded into the left with the basic content on the right in white. Hyperlinks given the btn class will appear as white text with a white outline. On mobile the logo will stack on top of the content.

layout:image

Activated by page tag layout:image on a basic page. The meta image will be loaded in container width. The page headline and content will be loaded in beneath it.

layout:image-fluid

Activated by page tag layout:image-fluid on a basic page. The meta image will be loaded in full width. The page headline and content will be loaded in beneath it.

layout:image-left

Activated by page tag layout:image-left on a basic page. In a two column layout the meta image will be loaded into the left side, with the headline and content loaded into the right side. On mobile the columns will stack - with the image appearing above the headline and content.

layout:image-left-fluid

Activated by page tag layout:image-left-fluid on a basic page. In a full-width two column layout the meta image will be loaded into the left side, with the headline and content loaded into the right side. On mobile the columns will stack - with the image appearing above the headline and content.

layout:image-left-mauriora

Activated by page tag layout:image-left-mauriora on a basic page. This is a special version of the image-left layout specifically created for the /mauriora page. In a two column layout the meta image will be loaded into the left side, with the headline and content loaded into the right side. On mobile the columns will stack - with the image appearing above the headline and content.
The image will appear with no padding or margins on the left - so the image edge touches the page edge.

layout:image-right

Activated by page tag layout:image-right on a basic page. In a two column layout the meta image will be loaded into the right side, with the headline and content loaded into the right side. On mobile the columns will stack - with the image appearing above the headline and content.

layout:image-right-fluid

Activated by page tag layout:image-right-fluid on a basic page. In a full-width two column layout the meta image will be loaded into the right side, with the headline and content loaded into the right side. On mobile the columns will stack - with the image appearing above the headline and content.

layout:image-right-mauriora

Activated by page tag layout:image-right-mauriora on a basic page. This is a special version of the image-right layout specifically created for the /mauriora page. In a two column layout the meta image will be loaded into the right side, with the headline and content loaded into the left side. On mobile the columns will stack - with the image appearing above the headline and content.
The image will appear with no padding or margins on the right - so the image edge touches the page edge.

layout:jumbo-headline

Activated by page tag layout:jumbo-headline on a basic page. This module layout loads in the page headline as a very large (jumbo) headline. This jumbo headline will appear in a gradient fading from gold to white. The page content will be loaded in beneath it.

layout:language-planning-elements

Activated by page tag layout:language-planning-elements on a basic page. The page headline and content will be displayed. Then for each nested basic page - a div will be loaded into a two column grid - displaying an icon next to it. The icons - pulled from the page attachments - will be displayed within a colored circle - following the color cycle: red, yellow, pink, green, orange.

Activated by page tag layout:logo on a basic page. In a two column layout - the meta image will be loaded into the left side. The image will not have a box-shadow - which most other image modules on the site have. If there are consecutive logo basic layouts in a row - they will be separated by a horizontal rule.

layout:nga-tohu

Activated by page tag layout:nga-tohu on a basic page. This is a basic content layout - which will load in the headline and the content - instead of the highlighted text being orange - it will be gold.

layout:nga-tohu-bold

Activated by page tag layout:nga-tohu-bold on a basic page. This module will load in on a dark gold background. The headline will be centered - followed by the meta image, and then the page content in a white box. a pattern will be visible on the left.

layout:nga-tohu-image-left

Activated by page tag layout:nga-tohu-image-left on a basic page. This is a special version of the image-left layout specifically for the Nga Tohu pages - where no box shadow is visible and the images are top aligned.

layout:nga-tohu-light

Activated by page tag layout:nga-tohu-light on a basic page. This module will load in on a white background. The headline will be centered - followed by the meta image, and then the page content will appear in a dark gold box.

layout:text-left

Activated by page tag layout:text-left on a basic page. This is a 2 column layout - but the text column on the left will be 75% of the container width - and the image will only be 25% of the container width.

layout:three-images

Activated by page tag layout:three-images on a basic page. The headline and content will be loaded into the left 50% of the container width - and the 3 attached page images will be loaded into the lower right part of the module - all slightly overlapping.

layout:translator-register-download

Activated by page tag layout:translator-register-download on a basic page. This layout was specifically created for the Translator Register page. The headline and content will be loaded into the module - followed by a special "Download" button - which will convert the entire Translator Register to a PDF and trigger a download.