Subpage Listing

Choose how you would like the title and summary for each page listing to be displayed. You can have the title and summary appear above, below, next to or over top of the page summary image, if one has been selected. If there is no page summary image, then there will simply be text boxes for each page in the subpage listing.

If you would like to add a background colour for each page in the subpage listing, turn on the 'Add background colour' toggle. Below, next to 'Background colour', select the colour you'd like to use. You can also add a background colour behind all of the pages in the subpage listing with the 'Content colours' setting.

Colour options

The colour options are based on the design of your website. You may be able to change the design colours depending on your Govstack plan. To get access to the website design features, speak with your GHD Digital Account Executive.

Choose how many pages you would like each row of the subpage listing to display. You may want to provide more space for pages with longer summaries and images. Experiment with different items per row to find the look you like best.

With the 'Item heading size' and 'Item secondary heading size' settings, choose how large you want the headings (and subheadings, if applicable) to be for each page in the subpage listing.

Next to 'Item text alignment', select how you want the headings and summaries for each page in the subpage listing to be aligned. We recommend left aligning most content to be the most accessible for North American audiences.

A subpage listing will automatically add space between each page listed. If you would like to remove this spacing, turn on the 'Remove item spacing' toggle.

When creating a subpage listing it is possible to place the listing on a page that appears in the listing. This duplication can be confusing to site visitors. Setting this option to 'Yes' removes the current page from the list.

Even if a page has an image added to its summary, you can choose not to display the image in the subpage listing. To do this, turn on the 'Hide image' toggle.

In the 'Image style' setting, you can choose which shape you want the images in the subpage listing to be.

If you select 'Original', then your images will appear with their original ratios on the page. Keep in mind that different images may have different ratios, so the subpage listing may display images of different shapes if you select this option.

If you select one of the ratio options, then all the images in the subpage listing will display in that ratio. The first number in each ratio represents the width while the second number represents the height. For example, a 2:1 image would be twice as wide as it is high.

If your images are cropped oddly or don't look the way you want them to after adjusting the image style, you may need to change their focal point so that they crop properly when changing the image ratio. Learn how to change the focal point of an image in your gallery in the 'Media' tab in the Govstack main menu.

After you select an image style in the 'Image style' settings, your subpage listing images will automatically be cropped to match your selection. However, you may prefer to have your images retain their original ratios while still having a consistent ratio display. To do this, turn on the 'Box pad' toggle to add padding around images to match the image style you have selected.

Next to 'Pages to display', you can select how many of the child pages from the parent page link you have chosen you want to display in the subpage listing. Leaving this field blank will limit the list to 10 pages. To show all pages enter a number equal to or higher than the total pages in the target directory.

You can set up the subpage listing to list all the child pages in the order they appear under their parent page, or you can have them appear in a random order every time a user visits the page. If you would like the pages to appear in random order in the subpage listing, turn on the 'Enable random order' toggle.

We recommend keeping the original order to make it easier for users to navigate through your website. Typically, pages should be listed in alphabetical order and match the order they appear in the side menu.

You can set up your subpage listing to display in carousel mode where it displays pages in a single row and cycles through them at regular defined intervals. To have your subpage listing display in a carousel, turn on the 'Enable carousel' toggle.

Allow users to scroll through a carousel

If you want users to be able to scroll through a subpage listing carousel themselves, rather than waiting for it to auto-scroll, you can either:

• Add left and right arrow buttons that users can select to move through the carousel. To do this, turn on the 'Show arrows' toggle
• Add clickable dots below the carousel gallery that users can select to view any page in the subpage listing. To do this, turn on the 'Show dots' toggle

Set the carousel rotation speed

Next to 'Auto rotate speed', use the slider to choose how often the carousel will automatically rotate pages. You can choose anywhere between one and 10 seconds.

If you select multiple directories in the content settings they will be displayed using tabs to separate the page lists.

This setting determines the style of the tab separator used. 

The 4 available styles are:

Basic

Button

Underline

Line through

These settings will be available only if the component is contained within a split component.

Using the 'Column Width' sliders you can set the width of the component in split components. The slider allows for column widths from 1 to 12. A minimum width of 2 is recommended.

The total width settings for 'Split Section 1' and 'Split Section 2' should equal 12. If the sum of 'Split Section 1' and 'Split Section 2' is greater than 12, your split content will appear on two rows.

Separate options are available for desktop and tablet size screens. On mobile screens split components switch to a single column.

You can add animation to the component by selecting the 'Animate' toggle. Once the 'Animate' toggle is selected, you'll have the option to customize the:

• Animation style
• Animation delay (seconds)
• Animation duration (seconds)

From the 'Animation style' dropdown menu, select the type of animation you'd like to add to the accordion. There are a variety of different animation options in the following categories:

• Attention Seekers
• Bouncing Entrances
• Fading Entrances
• Flippers
• Light Speed
• Rotating Entrances
• Sliding Entrances
• Zoom Entrances
• Specials

We recommend testing out a variety of animation styles to select the one you like the most. 

Please note

Animation styles can cause accessibility issues for some users visiting your website. For example, some users may experience motion sickness when viewing animated elements on your website.

Using the 'Animation delay' slider select the time in seconds that you'd like to delay the animation. 

Please note

Animation delay can cause accessibility issues for some users visiting your website. Certain animation styles and delays can combine to make your animated component invisible to screen readers. Please test your animations to make sure they are accessible.

You can select how long you'd like the animation to last on the component by using the 'Animation duration' slider. Select the number of seconds you'd like the animation to continue on the public website. 

In the 'Name' field you can give a unique name to the component. This will make it easier to differentiate between components, both on your page as well as in your clipboard.

You can create an anchor link that will link a user directly to the top of this component. 

When linking to this page add the anchor to the "Anchor / querystring" field in the "Select link" dialogue box. The link will then jump to the top of the target component rather than to the top of the page.

Note that anchor names are case sensitive. For best results use lowercase characters, numbers, and dashes only. Avoid spaces and special characters.

In the 'Custom classes' field, you can add any custom CSS classes you may have. Custom CSS classes can be found in the Design node under the 'CSS' tab in the backend of Govstack. 

If you'd like to add more than one custom class, you'll need to leave a space between each class. 

Please note

Depending on your Govstack plan, you may not be able to access the Design node in the backend. If you'd like to be able to add custom CSS and get access to the website design, contact your GHD Digital Account Executive.

We cannot guarantee that future updates to Govstack will not break or negatively impact custom CSS.

You can select additional styles to the component, including:

• Spacing
• Visibility
• Design

Spacing

You can remove the spacing around the component by selecting one of the following options:

• Remove spacing
• Remove spacing top only
• Remove spacing bottom only

Visibility

You can customize the visibility of the component. Select one of the following options:

• Hide on all screens
• Hide on extra small screens
• Hide on small screens
• Hide on medium screens
• Hide on large screens
• Hide on extra large screens

Design

Select one of the following options if you'd like to customize the design of the component:

• Show shadows - this will add a shadow effect to the component. Note that by default most Govstack websites do not have shadows. You can add these in the Design node
• Sticky - the component will stay on the screen even as users scroll down the page

Turn on the 'Hide from website' toggle if you'd like to hide this component from the web page.