All Collections
Admin Guide: Account Setup and Configuration
Insight CSS Classes
Insight CSS Classes

Classes that can be used in Insights for easy styling

Neli Ivanova avatar
Written by Neli Ivanova
Updated over a week ago

Quantive Results provides multiple classes that can be used when writing the HTML for insights. You can also use other classes that are part of Quantive, but be aware that they may change without notice. Classes listed below and prefixed with i_ are intended to be used in insights only and should be relatively stable, but may be adjusted from time to time if needed.

These classes are also provided as snippets and autocompletes in the Offline Insight Editor.

Class List

  • i_title - Used on an element containing title text

  • i_description_text - Used on an element containing descriptive test

  • i_dark_text - Used on an element containing dark text

  • i_error_text - Used on an element containing error (red) text

  • i_link_text - Used on an element containing link text (clickable, blue)

  • i_bold - Sets an element to be bolded

  • i_centered_text - Used on an element in which you want centered text

  • i_clickable - Used to make an element appear clickable

  • i_non_clickable - Used to make an otherwise clickable element appear non-clickable

  • i_flex_horizontal - Sets a container to have a horizontal flex

  • i_flex_vertical - Sets a container to have a vertical flex

  • i_vertical_center - Sets a flex container to vertically center

  • i_horizontal_center - Sets a flex container to horizontally center

  • i_space_between - Sets a flex container to use "space between" spacing

  • i_space_evenly - Sets a flex container to use "space evenly" spacing

  • i_baseline - Sets a flex container to use "baseline"

  • i_flex_wrap - Sets a flex container to wrap

  • i_widthXX - Sets the width to the specificed percentage (replace XX). Valid values are increments of 10 from 10 to 100 and 25, 33, 66, and 75

  • i_widthXXpx - Sets the width to the specificed number of pixels (replace XX). Valid values are 10 pixel increments from 30 to 100 and 100 pixel increments from 100 to 800.

  • i_heightXXpx - Sets the height to the specificed number of pixels (replace XX). Valid values are 10 pixel increments from 30 to 100 and 100 pixel increments from 100 to 800.

  • i_relative - Sets the position of an element to be relative

  • i_sticky_header - Used on a wrapper for elements that you want to always be at the top of the insight regardless of scrolling. Depending on your situation, you may need to override the top property to a different value

  • i_icon_text_pair - Used on the parent of two elements that are an icon and text pair, like an Objective, Key Result, or Task. Underneath the element with the class, you should have the image element for the icon and a div with the text you want to display next to the icon

  • i_space_topXXpx - Add space to the top of any element. Replace XX with 5, 10, 20 or 30.

  • i_space_LeftXXpx - Add space to the left of any element. Replace XX with 5, 10, 20 or 30.

  • i_space_rightXXpx - Add space to the right of any element. Replace XX with 5, 10, 20 or 30.

  • i_space_bottomXXpx - Add space to the bottom of any element. Replace XX with 5, 10, 20 or 30.

  • i_border_box - Adds a border to all sides of any element

  • i_border_left - Adds a border to the top of any element

  • i_border_right - Adds a border to the left of any element

  • i_border_bottom - Adds a border to the right of any element

  • i_primary_value_with_label - Adds a border to the bottom of any element

  • i_primary_value - Applied to a parent div that contains both a primary value and a label elements underneath it. The first element will be treated as the value and the second as the label

  • i_primary_value_label - Large font format for displaying a primary value, mostly used for scalar insights

  • i_table - A label intended to be used below the i_primary_value

  • i_table_non_sticky_header - Used on a table element to apply table formatting. Automatically applies horizontal borders and sticky/clickable headers. Use additional table classes to control additional aspects of the table. You will likely need to override the top property on the th for properly setting the sticky headers.

  • i_table_non_sorting_header - Used on a table element to specify the table should not have a sticky header. Should be used with i_table.

  • i_table_no_borders - Used on a table element to specify the table should not have a clickable header. Should be used with i_table. To make individual headers non-clickable, use i_non_clickable on the th element.

  • i_table_highlight_hover - Used on a table element to specify the table should not have borders. Should be used with i_table.

  • i_table_alternating_rows - Used on a table element to specify the table should highlight the row the cursor is hovering over. Should be used with i_table.

Overriding Parts for Specific Insights

If you need to overwrite part of a class for a specific insight, you can either create your own class within your HTML and apply it in addition to the Quantive provided class, or you can override or augment specific parts of the Quantive provided class.

Add Own Class Example

<style>
#myWrapperDiv .blue_text {
    color: blue;
}
</style>
<div id="myWrapperDiv">
    <div class="i_title blue_text">I'm Blue!</div>
</div>

Override/Augment Example

<style>
#myWrapperDiv .i_title {
    color: blue;
}
</style>
<div id="myWrapperDiv">
    <div class="i_title">I'm Blue!</div>
</div>

Did this answer your question?