Skip to content

# Page Layouts

Tools for laying out a page of content in consistent and accessible ways.

# Design Best Practices

Aim To

Don't

# How to

# Choosing the appropriate layout

The layout has two main sections:

  1. The header, which is consistent across all templates
  2. The content area, which is different depending on which layout you need

The header contains a title, as well as the option of adding:

  • A subtitle for supporting information
  • A button slot to hold any important actions that a user might quickly need to access, such as your primary call to action, admin-related or share buttons.
  • An additional open slot for anything else you might need, such as a cluster of badges.

Which content area you need will depend on the type of content you are designing for.

# One column layouts

# Two column layouts

# Other layouts

# Figma Tips and Tricks

  • Do not change the layer names in the template.
  • To input customised local components into the Figma template slots, make sure to have Auto Layout applied and set to Fill Container.
  • Deviating from the template provided will cause issues. The template is designed to inform technical build specifications. Don't change it.

# Examples

# Two Column Layout with Sidebar at the End - Desktop

# Two Column Layout with Sidebar at the End - Mobile

# Two Column Layout with Sidebar at the Start - Desktop

# Two Column Layout with Sidebar at the Start - Mobile

# One Column Layout

# API for Vue Components

# SkyTwoColumn

Props
Slots
Events

# SkyOneColumn

Props
Slots

Need help?

Send us a message in the #skyline-design-system Slack channel.

Open Slack

Have an idea to help us improve?

Send Feedback
Feedback