Style Samples

Overview of all available UI components and styles used across the website.

Typography

Heading 1 .display-3

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Display 1

Display 2

Display 3

Display 4

This is a regular paragraph with bold text, italic text, and a link.

This is a lead paragraph used for introductions.

This is muted text for secondary content.

Theme Colors

Primary
#c167ef

Secondary
#10bcee

Success
#198754

Danger
#dc3545

Warning
#ffc107

Info
#0dcaf0

Light
#f3f6f9

Dark
#2b3041

Navbar Blue
#166eea

Buttons

Solid Buttons

Outline Buttons

Button Sizes

Special Buttons (used in app)

Create new tracking View Create Your First Tracking Link

Badges

Primary Secondary Active Danger Warning Info Dark

Alerts

This is a primary alert.

This is a secondary alert.

This is a success alert.

This is a danger alert.

This is a warning alert.

This is an info alert.

Cards

Card with Header

This is the card body with some example text content.

Action

Simple Card

A card without a header, just title and text.

Highlighted Card

A card with primary border for emphasis.

Tables

Sample Table

Name	Files	Created	Status
Example Link	3	06.02.2026 14:30	Active	View
Another Link	1	05.02.2026 09:15	Inactive	View

Forms

Spacing & Utility Classes

Backgrounds

bg-primary

bg-secondary

bg-light

bg-dark

Text Colors

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-muted