Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesAccessibilityColorsIconographyTemplatesTypography

Foundations Templates

While Digital Guidelines provides the freedom to design apps in virtually any way, the layouts below depict examples of commonly used design patterns. These specific layouts highlight the features that an app can use and can be copied and modified as needed. Application content goes within the main content area, shown below with red columns.

Standard

An image of an empty standard template on a desktop device next to an image of an empty standard template on a mobile device. Both have a header on top and a footer at the end of the page, with a blank area in the middle to input content.

The standard template is essentially a blank canvas with the minimum required elements for State of Michigan applications. It consists of a header, a footer, and a main content area. Each portion serves to help users make their way around your app and identify it as an official State of Michigan app, using tools such as navigational links and buttons. While the header and footer are fixed and cannot be removed, the main content area can be adjusted as developers and designers see fit.



<!DOCTYPE html>
<html dir="ltr" lang="en">


<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
  />
  <title>Digital Guidelines - Basic example</title>
</head>


<body>
  <som-header
    home-link="/"
    app-name="Digital Guidelines"
    department-name="State of Michigan"
    main-content-id="mainContent"
    breakpoint="lg"
    sticky="false"
  >
  </som-header>


  <div class="container fill-content" role="main">
    <div class="row my-3">
      <div class="col">
        Basic example  
      </div>
    </div>
  </div>


  <som-footer></som-footer>
</body>


</html>

Sidebar

An image of an empty sidebar template on a desktop device next to an image of an empty sidebar template on a mobile device.

The sidebar template includes the minimum required elements that the standard template has, such as navigation, but also includes a secondary navigation to supplement the top-level hamburger menu as users dig deeper into an application. On desktop, the secondary navigation uses the panel component, which is replaced by the mobile subnav at smaller breakpoints.

<!DOCTYPE html>
<html dir="ltr" lang="en">


<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
  />
  <title>Digital Guidelines - Left sidebar example</title>
</head>


<body>
  <som-header
    home-link="/"
    app-name="Digital Guidelines"
    department-name="State of Michigan"
    main-content-id="mainContent"
    breakpoint="sm" sticky="false"
  >
    <!-- hide on smaller screens and use the panel menu option but show on desktop -->
    <som-list slot="header-menu" type="header" class="d-none d-lg-block">
      <som-list-item>
        <a href="#">Item 1</a>
      </som-list-item>
      <som-list-item>
        <a href="#">Item 2</a>
      </som-list-item>
      <som-list-item>
        <a href="#">Item 3</a>
      </som-list-item>
    </som-list>
  </som-header>


  <som-mobile-subheader subheader-title="Child page" breakpoint="lg">
    <som-list type="sidebar">
      <som-list-item active>
        <a href="#">Subnav 1</a>
      </som-list-item>
      <som-list-item>
        <a href="#">Subnav 2</a>
      </som-list-item>
      <som-list-header>Subnav Header</som-list-header>
      <som-list-item>
        <a href="#">Subnav 3</a>
      </som-list-item>
      <som-list-item>
        <a href="#">Subnav 4</a>
      </som-list-item>
    </som-list>
  </som-mobile-subheader>


  <div class="d-flex">
    <som-sidebar>
      <som-list type="sidebar">
        <som-list-item active>
          <a href="#">Subnav 1</a>
        </som-list-item>
        <som-list-item>
          <a href="#">Subnav 2</a>
        </som-list-item>
        <som-list-header>Subnav Header</som-list-header>
        <som-list-item>
          <a href="#">Subnav 3</a>
        </som-list-item>
        <som-list-item>
          <a href="#">Subnav 4</a>
        </som-list-item>
      </som-list>
    </som-sidebar>
    <div id="mainContent" class="fill-content">
      <div class="mb-3">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-10 col-lg-8">
              <div class="section-title mb-3">Hero Content</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="container pt-3">
        <div class="row mb-5">
          <div class="col-12 col-md-6">
            <div class="section-title mb-2">Main Content</div> 
          </div>
        </div>
      </div>
    </div>
  </div>
  <som-footer>
    <som-footer-item>
      <a href="#">Link 1</a>
    </som-footer-item>
    <som-footer-item>
      <a href="#">Link 2</a>
    </som-footer-item>
  </som-footer>
</body>


</html>
Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source