Insight CSS Classes | Quantive Help Center

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>