Layout Systems

The Minerva framework provides several layout utilities and components. It is helpful to understand the layout system's roots in the design system.

Containers

As outlined in the design system, Minerva accounts for three widths: Standard, Wide, and Full. You can constrain contents of a container to one of these widths by using one of the following classes:

• ua_layout--standard
• ua_layout--wide
• ua_layout--full

It should be noted that these will set the max with for all children of the container, not the container itself. This allows the width of children to be overridden, enabling wider sections. To set the width of a container itself, you can use one of the following classes:

• ua_width--standard
• ua_width--wide
• ua_width--full

Minerva includes the Group component to help set the layout and width of content as well as the contrast mode the group should be set to.

Columns

Text and lists can be laid out in columns using the class ua_layout--columns. This will usually result in a two column layout for standard content widths and three columns for wide widths.

Grid

The Grid component can be used to lay out items in a standard grid. By default, the grid will contain as many columns as space will allow. This can be constrained with the maxColumns prop.

In React, you can use the Grid component directly from the Minerva package. In plain HTML, you can use the ua_layout--grid class, and columns can be constrained by setting an inline style defining the CSS custom property --grid-column-count.

Page structure

In React projects, it is highly encouraged to use the Page component from the Minerva package. You can set the various page areas using component props. For plain HTML, the following structure should be used:

<!-- brand bar and title bar goes here -->
<main id="skip-link-target" class="ua_page">
  <header class="ua_page_header">
    <!-- optional hero goes here -->
  </header>
  <div class="ua_page_sub-nav ua_layout--standard">
    <!-- optional sidebar navigation goes here -->
  </div>
  <div class="ua_page_content ua_layout--flow">
    <h1>
      <!-- page title goes here -->
      <!-- can be omitted if hero is included -->
    </h1>
    <div class="ua_layout--standard ua_layout--flow">
      <!-- main content goes here -->
    </div>
  </div>
</main>
<!-- site footer and brand footer goes here -->