Components

Components & Styling Guide

A comprehensive reference of all available styling components and CSS classes used across the site

Typography

Headings

Heading 1 (text-4xl font-bold)

Heading 2 (text-3xl font-bold)

Heading 3 (text-2xl font-bold)

Heading 4 (text-xl font-bold)

Heading 5 (text-lg font-bold)
Heading 6 (text-base font-bold)

Prose Styling

This is a paragraph with prose styling. It has proper line height and spacing.

Prose Heading 1

Prose Heading 2

Prose Heading 3

Prose Heading 4

Prose Heading 5
Prose Heading 6

Another paragraph with styled links that have proper hover effects.

Font Families

Sans-serif (TT Norms) - Default font family

Monospace (Fira Code) - For code and technical content

Virgil (FG Virgil) - Handwriting/specialty font

Digital (Digital-7) - Digital display font

Text Sizes

Extra Small (text-xs) - 12px

Small (text-sm) - 14px

Base (text-base) - 16px

Large (text-lg) - 18px

Extra Large (text-xl) - 20px

2XL (text-2xl) - 24px

3XL (text-3xl) - 30px

4XL (text-4xl) - 36px

5XL (text-5xl) - 48px

Code & Technical Elements

Inline Code

Use backticks class for inline code styling.

Example: sudo vim /etc/pam.d/sudo

Code Blocks

# This is a comment

auth sufficient pam_tid.so

auth sufficient pam_smartcard.so

auth required pam_opendirectory.so

Pre-formatted Code

const example = "This is pre-formatted code"; console.log(example);

Lists

Regular Lists

  • Regular list item
  • Another list item
  • Third list item

Industrial Lists

  • Industrial list with custom bullet
  • Uses square bullet (■) in blue
  • Proper spacing and positioning

Article Lists

  • Article list item with spacing
  • Used in article content
  • Consistent spacing between items

Blockquotes & Alerts

Blockquotes

This is a blockquote with industrial styling. It has a blue left border and light blue background.

Disclaimer/Alert

⚠️ This is a disclaimer/alert box with yellow left border and light blue background.

Markdown Alert (Note)

Note

This is a markdown alert note with custom styling. It has a green theme and proper spacing.

Buttons

UI Button Variants

Button Sizes

Custom Button Classes

Cards & Containers

UI Cards

Card Title

Card content with proper spacing and styling.

Another Card

Cards can contain any content and maintain consistent styling.

Industrial Content Box

Industrial H3 Title

This is content within an industrial content box. It has a black border and white background.

  • Industrial list item
  • Another item

Industrial Header

Industrial Header

Right side content

Tables

Industrial Table

Header 1Header 2Header 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
Row 3, Cell 1Row 3, Cell 2Row 3, Cell 3

Badges & Tags

UI Badges

Default
Secondary
Destructive
Outline

Custom Tags

Custom TagLink Tag

Filter Buttons

Links

Regular Links

This is a regular link with hover effects.

Prose Links

This is a prose link with custom styling including underline offset and thickness.

Separators

UI Separator

Content above separator

Content below separator

Horizontal Rule

Content above horizontal rule

Content below horizontal rule

Images

Responsive Images

Sample responsive image

This is an image caption with proper styling and spacing.

CSS Variables & Colors

Industrial Color Palette

--industrial-dark-blue

#25358a

--industrial-medium-blue

#5c71b7

--industrial-light-blue

#eaeff8

--industrial-black

#000000

Font Size Variables

--font-size-xs

12px

--font-size-sm

14px

--font-size-base

16px

--font-size-lg

18px

--font-size-xl

20px

Responsive Design

Responsive Visibility

This text is only visible on desktop (min-width: 768px)

This text is only visible on mobile (max-width: 768px)

Responsive Spacing

This container has responsive padding: p-4 on mobile, p-8 on desktop

Responsive Text

This text scales from small on mobile to large on desktop