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 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



Gradients in H3

Platform

Create

Ideas

Roadmaps

Develop



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).



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.


Organize your thoughts

Use a digital notebook complete with virtual whiteboards to capture your thoughts. Add digital sticky notes and diagrams to personally polish concepts and collaborate in real time with the team.

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.


Icon card

Alarming Highlightcard

Tailor your ideas portal to match your brand — including your portal domain, theme color, terminology, idea capture forms, and more.

Alarming Highlightcard

Tailor your ideas portal to match your brand — including your portal domain, theme color, terminology, idea capture forms, and more.

Alarming Highlightcard

Tailor your ideas portal to match your brand — including your portal domain, theme color, terminology, idea capture forms, and more.

Alarming Highlightcard

Tailor your ideas portal to match your brand — including your portal domain, theme color, terminology, idea capture forms, and more.

Alarming Highlightcard

Tailor your ideas portal to match your brand — including your portal domain, theme color, terminology, idea capture forms, and more.

Article Card

Analyze ideas and requests by customer segment
Analyze ideas and requests by customer segment

Analyze ideas and requests by customer segment
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

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