Global Styles

Updated March 30th, 2023

The purpose of this page is to show example HTML and class names for primitive elements. To view mobile layout versions, please resize the viewport. Interactions such as hover states will be shown when interacting. For general interaction and usage guidelines please refer to the UIKit page in the Figma document.


Bootstrap

Trellix.com uses the Bootstrap 5.1 framework

Please read the documentation to learn how to use it.

Almost any layout, style, design, functionality, etc. can be easily implemented in AEM by utilizing blade containers, normal components, HTML components, and bootstrap classes. Give it a good attempt and if you can't get it how you want, please reach out to another team member before writing new CSS or JS.


TOC


Colors

Background Colors

.bg-gray-black

.bg-gray-dark

.bg-gray-medium

.bg-gray

.bg-gray-light

.bg-gray-light-50

.bg-gray-extra-light

.bg-white

.bg-purple

.bg-indigo-dark

.bg-indigo

.bg-primary or .bg-blue

.bg-light-blue

.bg-cyan

.bg-teal

.bg-green

.bg-yellow

.bg-orange

.bg-red

.bg-pink

Text Colors

.text-gray-black

.text-gray-dark

.text-gray-medium

.text-gray

.text-gray-light

.text-gray-light-50

.text-gray-extra-light

.text-white

.text-purple

.text-indigo-dark

.text-indigo

.text-primary or .text-blue

.text-light-blue

.text-cyan

.text-teal

.text-green

.text-yellow

.text-orange

.text-red

.text-pink

Gradients

Click to copy the class.


Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Subhead - .subhead Lorem ipsum dolor

Body Intro - .body-intro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet mollis luctus. Aenean pulvinar erat rhoncus est euismod suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Copy - <p> or .body-copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet mollis luctus. Aenean pulvinar erat rhoncus est euismod suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Copy BOLD - .fw-bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet mollis luctus. Aenean pulvinar erat rhoncus est euismod suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Form label - <label> or .label Lorem ipsum dolor sit amet.

Caption - .caption Lorem ipsum dolor sit amet.

Bullets

Basic Bullets

These are how the default bullets will appear if not using any special classes.

  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3

You can remove the default dots by adding the class .list-style-none to the <ul> element.

  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3

2-column Bullets

Bulleted lists can be set up in 2 columns for desktop & tablet sizes. To do this, add the class .duo-col to the <ul> element.

  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3
  • Bulleted list item 4
  • Bulleted list item 5
  • Bulleted list item 6

Icon Bullets

These are special bullets where the default dot is replaced with a Bootstrap Icon. The following icons are currently supported:

    ul.dot-bullets
  • Dot list item 1
  • Dot list item 2
  • Dot list item 3
    ul.check-bullets
  • Checkmark list item 1
  • Checkmark list item 2
  • Checkmark list item 3
    ul.x-bullets
  • X list item 1
  • X list item 2
  • X list item 3

Individual list items within unordered lists can have a different icon

    ul.check-bullets > li.x-bullet
  • X list item
  • Checkmark list item 1
  • Checkmark list item 2

Icon Bullet Colors

Add a color between the icon name and "bullets" to change the color (all style guide colors are supported, use same name as css varisble).

    ul.check-green-bullets > li.x-red-bullet
  • Red X list item
  • Dark checkmark list item 1
  • Dark checkmark list item 2

Tooltips

Use the following format to create a tooltip. Please refer to the Bootstrap 5 documentation for more information.

<a
class="bi bi-info-circle"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-original-title="Tooltip text goes here"></a>

Normal text

You can create a read more functionality to the text by adding .truncate to the tag you want to shorten.

<p class="truncate">Text to shorten...</p>

Text to shorten. Minim nostrud anim elit quis laborum exercitation incididunt commodo minim officia ex minim. Eu aliqua quis ad nostrud pariatur. Commodo proident ex ea deserunt. Sint sint enim duis veniam anim nisi ullamco aliquip. Magna velit pariatur est adipisicing exercitation est non dolor excepteur. Esse do Lorem minim cillum eu non nisi nisi labore id amet nulla sunt amet.


Body Copy - Lorem ipsum Example Link.

External links using .link-external
(Only use with external links, i.e. links using target="_blank")

Arrow links using .link-arrow

Download links using .link-download

Watch Videos using .link-watch
(Use primarily with fancybox modals containing videos. See example)

Buttons

Button Creator

Click the button to copy its class list with the selected properties. To see a complete list of the icons, go here

Frequently Used

Note: .btn-external, .btn-download, & .btn-watch are legacy class names. They are equivalent to the new bootstrap classes of .bi-box-arrow-up-right, .bi-download, & .btn-play, respectively.
.btn.btn-primary
.btn.btn-primary.btn-external
.btn.btn-primary.btn-download
.btn.btn-primary.btn-watch
.btn.btn-outline-primary
.btn.btn-outline-primary.btn-external
.btn.btn-outline-primary.btn-download
.btn.btn-outline-primary.btn-watch

Smaller Buttons

.btn.btn-small.btn-primary
.btn.btn-small.btn-outline-primary.btn-external

Dark BG

.btn.btn-inverted
.btn.btn-inverted.btn-external
.btn.btn-inverted.btn-download
.btn.btn-inverted.btn-watch
.btn.btn-outline-inverted
.btn.btn-outline-inverted.btn-external
.btn.btn-outline-inverted.btn-download
.btn.btn-outline-inverted.btn-watch

Tables

Basic Tables

.table.text-center

Column 1

Column 2

Column 3

Data 1

Data 2

Data 3

.table

.gt-head.bg-gray-black.text-white

Column 1 Column 2 Column 3

Data 1

Data 2

Data 3

Data 1

Data 2

Data 3

Span Columns

When using spanned columns, you must remove the gap and padding from .gt-head & .gt-row by adding .p-0 & .gap-0 to them. Then you add padding to each of the cells in the table. .p-2 is preferred but not mandatory.

It is not recommended to use different cell-span lengths in different rows as in the example below, As you can see, this causes alignment issues. If you need to span a column, do it at the same length for all rows in the table unless broken by a new .gt-head.

.gt-head.bg-gray-black.text-white.p-0.gap-0

.gt-row.p-0.gap-0

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6

.cell-span-2.p-2.bg-gray-light

Normal

Normal

Normal

Normal

.cell-span-3.p-2.bg-gray-light

Normal

Normal

Normal

.cell-span-4.p-2.bg-gray-light

Normal

Normal

.cell-span-5.p-2.bg-gray-light

Normal

.cell-span-6.p-2.bg-gray-light


Videos

Trellix.com uses the Fancybox to handle modal-based content like videos, documents, and image galleries.

Please read the fancybox documentation to learn how to use it.

Example of use:

Tab Components

Page-level Tabs