Skip to main content

Home panel

Home panel shortcodes are used to create interactive panels that link to different pages. They are used on the home page and on landing pages that require more description than a simple list. The panels are designed to sit three across on large screens.

Home Panel Container

The home-panel-container shortcode is used to wrap a collection of home-panel shortcodes, giving them a unified layout and structure.

[home-panel-container]
... list of [home-panel] shortcodes
[/home-panel-container]

Home Panel

The home-panel shortcode creates an individual panel with a link, an image, a title, and a description.

[home-panel title='Geometry' link='/trigonometry/' img='https://path.to.image']<p>Short description here</p>[/home-panel]
  • Link: Specify a URL that the panel will navigate to when clicked. Use a relative URL.
  • Image: Use an absolute path for the image URL (e.g., https://rmitlibrary.github.io/path/to/image.png).
  • Title: The panel title should be concise and descriptive.
  • Description: Include a short description (no more than 160 characters) about what the panel links to or represents. Wrap this in a <p> tag.
  • Ensure that panels are wrapped within the home-panel-container to apply the correct styling.

If an image is omitted, the panel will be displayed in a simplified format like this:

When using this approach, ensure all panels on the page either include an image or omit it consistently.