Options

This is an element, meaning it is used within other modules but not as a standalone module.

Sidebars use the following elements:

• Tree Nav Toggle Button
• Action Buttons
• Info Block
• Line
• CTA Button

Sidebars can reuse its elements in any number of ways (following the rules outlined below). We have built out 5 variations for demonstration purposes.

Variants

• Sidebar 1
  • Tree Nav Toggle Button
  • Line
  • Action Buttons (Share, Collect, Language, Resources)
• Sidebar 2
  • Tree Nav Toggle Button
  • Line
  • Action Buttons (Share, Collect
  • Info Block
  • CTA Button
• Sidebar 3
  • Info Block
  • Line
  • Info Block
• Sidebar 4
  • Action Buttons
  • Info Block
• Sidebar 5
  • Tree Nav Toggle Button
  • Line
  • Action Buttons (Share, Collect, Floor Plan)

Rules

• Max 1 Tree Nav Toggle Button per sidebar
• Max 1 Share or Collect Buttons
• If a Tree Nav Toggle Button is used, it must be the first element.
• A line can never be the first element.
• Never use a line between the Action Buttons and Info Block. The only time you can use a line (<span class="line"></span>) is between info blocks (see sidebar 3), or between a Tree Nav Toggle Button and Action Buttons (sidebars 1, 2 and 5). Action Buttons must always be preceded by a line if they are not the first element.
• CTA Button (see sidebar 2) should always use their dark variant (.amnh-button--dark).
• To add a title to a paragraph in the info block, use the <strong> tag.

Notes/Recommendations

• Max 1 Cta Button per sidebar
• Do not stack CTA Buttons