Introduction

The following guide illustrates how various components display on the website.

Do not permanently delete or remove examples as they may be used in the live website
You can click into an example (in the CMS) to further review settings of the component

Heading Size
Heading colors
Buttons / CTA
Slants
Overlapping image
Highlight cards
Video (size)
Spacer block (for Footer overlap issues)
Tables

Heading size and color options

Size

Heading 1 - H1

Heading 2 - H2

Heading 3 - H3

Heading 4 - H4

Heading 5 - H5

Heading 6 - H6

Meta/Subheadings

Meta Small - #C0DE02

Meta Large - #C0DE01

Subheading One - #C0DE00

Using color codes (e.g. #C0DE00) on the text highlight, the above styles can be applied to any semantic heading level H1–H6 in editor content. (Note there is no letter "O" in the color code!)

Solid colors in H3

Create rose

[#913D56]

Ideas green

[#4F8F0E]

Roadmaps blue

[#004582]

Develop purple

[#624F73]

Dark blue

[#624F73]

Other options

Preformatted

Quote

Create

Roadmaps

Platform

Develop

Ideas

Buttons

To achieve the CTA - colored buttons in the editor, you have to apply the following styles to text within the Content field (the text editor).

Active
- link bold blue
  - Button
- Primary link bold italic emerald
  - Button
- Secondary link strikethrough bold outline sapphire
  - Button
- Tertiary link ~~strikethrough~~ italic
  - Button
Inactive
- link italic
  - Button

Slant options

Slants can be added to sidekicks or any component with a JSON editor section by adding the following code (starting with '{ ' ). Page content is a comp

For a slant at the top, add this code:

{ "sectionClasses": "Section--gray-slant-top"}

For a slant at the bottom such as this page, add this code:

{"sectionClasses": "Section--gray-slant-bottom"}

For a slant at the top and bottom, add this code:

{ "sectionClasses": "Section--gray-slant-top-bottom"}

For a slant in the middle of a component such as this page, add this code:

{"sectionClasses": "Section--gray-slant-bottom Section--gray-slant-bottom-halfway"}

Note: the Json editor is not available in most content types (e.g. page content, grid, page, highlight card). It is available in the Sidekick and Component content types.

This is a sidekick that inserts a slant on the top and bottom of the content.

Overlapping Images

To get new sidekick styling, add the Sidekick--overlapping class in the JSON Editor :

{
    "additionalClasses": "Sidekick--overlapping"
}

To get double image Sidekick styling (used on Suite overview page), use Sidekick--double-image

{
    "additionalClasses": "Sidekick--double-image"
}

See the example below found in the suite overview page.

Note: the Json editor is not available in most content types (e.g. page content, grid, page, highlight card). It is available in the Sidekick and Component content types.

Build a product knowledge hub

Bring notes and whiteboards together in one tool to create and collaborate on product concepts. Get inspired with nearly 100 templates designed by product experts to showcase your best thinking.

Learn more

Highlight Cards

To achieve the below cards, use a Grid + Highlight card content type.Set Autofill grid columns to 3 column or 1 column.

Previously we were using the columns field. This still requires a # but any # can be placed there. We will need to move over other pages to this format over time and ensure Autofill grid columns always has a value.

Default Card

View feedback by organization in Aha! Ideas Advanced.

Know your customers

Gain greater insights into users' needs with the Aha! Ideas Advanced plan.

Upgrade now

Plan what to build

Learn how to score features based on product value — so you can say "yes" or "no" with conviction.

See how

Get started quickly

Watch an overview video to see what is possible with Aha! Roadmaps.

Watch now