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
Table of Contents
Heading colors
Buttons / CTA
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
PreformattedQuote
Create
Roadmaps
Platform
Develop
Ideas
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.
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
Article Card
Analyze ideas and requests by customer segment
Analyze ideas and requests by customer segment
Analyze ideas and requests by customer segment
Image Teaser
Video size
Currently video is mainly hosted on Wistia. If the video component in the CMS is used please see below instructions.
To reduce the video size, use the Video content type and add the following in the Json editor
{
"additionalClasses": "w-full md:w-3/4 mx-auto"
}With these classes, the video will be full width on smaller screens, 75% width on screens tablet sized and up, and be centered in the middle of the screen.
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.
Spacer Block
The footer on many pages may be overlapping with the content. To solve for this a default spacer component has been created and can be added as needed. Search 'Spacer block' in existing components to add it as needed to pages. Link here.
Tables
Tables are limited in terms of styling. Column borders are not visible but row borders are.
Here is an example of a page using tables.
Column 1 | Column 2 | Column 3 |
Column 1 | Column 2 | Column 3 |
Column 1 | Column 2 | Column 3 |
Tables with a blue background color | ||
Trusted by 700,000+ product builders
Aha! is a game changer. It brings a new level of transparency and collaboration that is critical to help us transform our organization and deliver new digital customer experiences.
Anne Walsh (1)Customer Experience Manager AAA
Implementing Aha! software has been a sea change for our team. We are now more focused than ever on delivering product value — for our customers and the business.
Jerimiah RuddenSenior Manager, Product Strategy and Operations | Genesys
Resources for product teams
Advice, product updates, and resources to help you be your best
How Product Managers Beat Writer's Block
I write a lot. You already know this if you subscribe to my newsletter on LinkedIn , read the Aha! blog regularly, or have checked out my book .
Dare to deliver
planning efficiency gains
“Aha! transformed the way we work — from capturing customer ideas to sharing product roadmaps.”
hours saved annually
“We save at least 10 hours a week previously spent manually updating presentations and spreadsheets."
How Product Managers Beat Writer's Block
I write a lot. You already know this if you subscribe to my newsletter on LinkedIn , read the Aha! blog regularly, or have checked out my book .
less time tracking status
“Aha! provides a real-time ‘State of the Union’ of everything we need to know about our product portfolio.”
teams aligned on strategy
“Aha! empowers product managers to make decisions with confidence and easily communicate our plans.”
consolidation of product tools
“We are far more empathetic to our customers’ needs. Aha! helps us crystalize their real pain points.”
faster reporting
“Our team now work together in one system — giving us unparalleled visibility into what’s happening.”
Hardcoded styleguide elements
Create a visual roadmap
Set brilliant strategy, prioritize features, and share visual plans — based on what customers really want. Learn more
