Trellix Logo
Icons
General Xpand Products Values Marketecture
Logos
Trellix Xpand Products
Style Guide GSAP Guide

Trellix Style Guide

Updated October 1st, 2024

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.

Our Bootstrap implementation is customized to include several enhancements such as custom colors, gradients, sizes, and more. Please refer to the sections below for more information.

TOC

Sizing Colors Typography Heroes Links / Buttons Tables Videos

Bootstrap Sizing Units

1rem = 16px

Absolute Sizes:

Shorthands:

  • 0
    0rem
  • 1
    0.25rem
  • 2
    0.5rem
  • 3
    1rem
  • 4
    1.5rem
  • 5
    2rem
  • 6
    2.4375rem
  • 7
    10.3125rem

Full List:

  • 8
    0.5rem
  • 12
    0.75rem
  • 16
    1rem
  • 20
    1.25rem
  • 24
    1.5rem
  • 28
    1.75rem
  • 32
    2rem
  • 36
    2.25rem
  • 40
    2.5rem
  • 44
    2.75rem
  • 48
    3rem
  • 52
    3.25rem
  • 56
    3.5rem
  • 60
    3.75rem
  • 64
    4rem
  • 68
    4.25rem
  • 72
    4.5rem
  • 76
    4.75rem
  • 80
    5rem
  • 88
    5.5rem
  • 96
    6rem
  • 104
    6.5rem
  • 112
    7rem
  • 120
    7.5rem
  • 128
    8rem
  • 136
    8.5rem
  • 144
    9rem
  • 152
    9.5rem
  • 160
    10rem
  • 165
    10.3125rem

These sizes work with most bootstrap classes that affect styling except for sizing classes which use the relative styling units below.

Use these units appended to the end of certain classes like .p or .m. For example: .p-3 or .m-48.

Relative Sizes:

  • 0
    0%
  • 5
    5%
  • 10
    10%
  • 15
    15%
  • 20
    20%
  • 25
    25%
  • 30
    30%
  • 33
    33%
  • 35
    35%
  • 40
    40%
  • 45
    45%
  • 50
    50%
  • 55
    55%
  • 60
    60%
  • 65
    65%
  • 67
    67%
  • 70
    70%
  • 75
    75%
  • 80
    80%
  • 85
    85%
  • 90
    90%
  • 95
    95%
  • 100
    100%

These units work with classes like those that define width and height. For width, the format is .w-[%], for example .w-50 which forces an element to 50% percent the width of its container (as long as they hae the appropriate positioning).

Note: the .w-[%] classes will override any .col classes, so make sure to only use one type on an element. The .w classes do not have breakpoint definitions, so .col is better to use in most situations.

Breakpoints

[WIP]

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.

You can combine gradient classes with background classes to make color combinations

.bg-primary & .indigo-gradient-east
.bg-cyan & .green-gradient-southeast

Notch Elements

Select from the various options below to create your notched element class, than click the element to copy the generated class.
Notch elements are used to create a notch in a box or container to make it stand out. They are used in various places throughout the site.

The shorthand class .notch applies the default notch properties (indicated below).

The class name is structured as: .notch-[color]-[direction]-[size].

For example, .notch-gray-light-se-md would create a medium sized notch in the south east direction with a light gray color. You can leave out options from right to left to use the default value.
For example, .notch-gray-light would create a medium sized notch in the south east direction with a light gray color.
Or, .notch-gray-light-se would create a medium sized notch in the south east direction with a light gray color.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam laborum illum doloribus odit repellat amet, ipsam perferendis cum temporibus quis, tempora facere. Quia debitis voluptatem ab voluptatum iure libero vel.

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.circle-bullets
  • Circle list item 1
  • Circle list item 2
  • Circle list item 3
    ul.square-bullets
  • Square list item 1
  • Square list item 2
  • Square list item 3
    ul.box-bullets
  • Box list item 1
  • Box list item 2
  • Box 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.

Heroes

There are 6 different sizes of heroes:

  • Jumbo .hero.jumbo (Rarely used, special pages only)
  • XL .hero.xl (Rarely used, special pages only)
  • Large .hero.large (Sometimes used, ex: Threat Reports)
  • Medium .hero or .hero.medium (Most often used, normal pages)
  • Small .hero.small (Sometimes used, Tertiary pages like Security Awareness Articles)
  • Smaller .hero.smaller (Rarely used, special pages only)

Additionally, there are 2 Styles of heroes:

  • Regular .hero
  • Inverted .hero.inverted or .hero.reverse (Used when the BG image / color is too light to read white text)
Use this tool to help determine if you should invert the hero colors

There is also a different type of hero, which allows a proceeding element to overlap it slightly:

We will be using these on new hero pages (2024) and other pages which use newer design features.
Note: These cannot be used with any hero size except the Medium size, for now.

  • Bleed Hero .hero.bleed (Product pages)
  • Sliced Hero .hero.sliced (Not used)

Default Hero Structure:

Page Title

Page subtitle

First Button Second Button

Example overlap element

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

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

Tab Components

Page-level Tabs