Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

List

Organize information into brief and clear groups.

Code examples
  1. An ordered item
    • An unordered item
    • A longer item that wraps to a second line
      • An item on a 3rd level
  2. An ordered item
    • An unordered item
      • An item on a third level
      • A second item on a 3rd level
        • An item on a 4th level
<ol className="goa-ordered-list">
  <li>
    An ordered item
    <ul>
      <li>An unordered item</li>
      <li>
        A longer item that wraps to a second line
        <ul>
          <li>An item on a 3rd level</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    An ordered item
    <ul>
      <li>
        An unordered item
        <ul>
          <li>An item on a third level</li>
          <li>
            A second item on a 3rd level
            <ul>
              <li>An item on a 4th level</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ol>

Unordered list

  • Milk
  • Cheese
    • Blue cheese
    • Feta
<ul className="goa-unordered-list">
  <li>Milk</li>
  <li>
    Cheese
    <ul className="goa-unordered-list">
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>
Design guidelines

Coming Soon

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes