Elevate Components (Lite)

Elevate Components

UE Elevate design system components ready for use in explorations. This page demonstrates all documented components and patterns.

Typography

Headings

Display Heading (4xl)

Page Heading (3xl)

Section Heading (2xl)

Subsection (xl)

Subheading (lg)
Body Text

Base text — Regular body copy (16px)

Small text — Secondary information (14px)

Extra small — Supporting text (12px)

Text Colors

Default text color

Subtle text color

Nonessential text

Primary brand color

Link color

Success text

Critical text

Warning text

Icons

Icon Library

Complete icon library with 293 SVG icons from UE Elevate + extended set. All icons are available in the /shared/icons/ directory.

Usage: <img src="../icons/ui-icon-[name].svg" width="24" height="24" alt="">

Sample Icons
Chevron Down
chevron-down
Arrow Right
arrow-right
Caret Up Down
caret-up-down
Check
check
Close
close
Edit
edit
Plus
plus
Person
person
People
people-group
Mail
mail
Bell
bell
Search
search
Settings
settings
Info
info-circle
View Icon Gallery

Buttons

Primary
Secondary
Tertiary
Brand
Inverted (for dark backgrounds)
Text Buttons
Button Groups

Icon Buttons

Buttons with only icons, no text. Always include aria-label for accessibility. View detailed template →

Sizes (Small, Medium, Large)
Primary Style
Secondary Style
Tertiary Style
Ghost Style

Control Buttons

Small utility buttons for UI controls like close, expand, minimize. Subtle styling for secondary UI. View detailed template →

Sizes (Small, Medium)
Close Control (red hover)
Common Controls
In Context: Modal Header

Modal Title

Button Groups

Arrange buttons with visual connection. Most common: Primary + Tertiary. View detailed docs

Horizontal (Default)
Three Buttons
Connected Style
Vertical Stack
Tight Spacing (8px)

Content Cards

Structured card layout pattern with header, body, and optional footer. View detailed docs

Basic Card (Bordered)

Card Title

Card description with supporting text. Border defines edge, no shadow.

With Subtitle

Account Settings

Manage your profile

Update account information and preferences.

With Header Actions

Notifications

You have 3 unread notifications.

With Footer

Confirm Action

Are you sure you want to proceed?

Elevated (Shadow)

Floating Card

Subtle shadow for modals and popovers. No border when elevated.

Inset Cards

Recessed card variant for nested or secondary content. View detailed docs

Basic Inset

Recessed appearance with light background for nested content.

Bordered Variant

White background with border only for lighter appearance.

Subtle Variant

Minimal background with no border.

Nested in Card

Product Info

Primary content area with main information.

Note:

Secondary nested content for tips or disclaimers.

Size Variants

Small (12px padding)

Default (16px padding)

Large (24px padding)

With Accent Border

Warning

Accent border highlights important notes or warnings.

Index Navigation

Tab-like navigation for page sections and anchor links. View detailed docs

Cards & Layouts

Basic Card

Card Title

Card description with supporting text that explains what this card is about.

Card with Shadow Levels

Shadow 1

Shadow 2

Shadow 3

Grid Layout

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Loading Spinners

Animated loading indicators for async operations. View detailed docs

Sizes (Primary)
Colors
In Context
Loading your data...

Avatars

User avatars with image, initials, or placeholder states. View detailed docs

Sizes (with images)
User
User
User
Initials
JD
AS
MK
Anonymous Profiles
Anonymous
Anonymous
Anonymous
Anonymous
In Context
Jane Doe

Jane Doe

Product Manager

Status Badges

Compact status indicators with semantic color treatments. View detailed docs

Primary States
Neutral Info Success Warning Critical New Featured
Dot Indicators
Active Inactive
In Context
Project Alpha Active
API v2.0 New

Progress Bars

Visual indicators for task completion, uploads, and multi-step processes. View detailed docs

Sizes
Colors
With Label
Profile completion: 80%

Star Ratings

Display product ratings and review counts. View detailed docs

Sizes
4 out of 5
4 out of 5 (1,234)
Half Stars
4.5 out of 5

Product Details

Horizontal layout: avatar | content (title, seller, rating). Default is :md (80px avatar). Avatar size matches component size. View detailed docs

XS (48px avatar) — title + rating, no seller
Product placeholder
HubSpot CRM
4.5 (28,123)
SM (64px avatar) — compact cards
Product placeholder
Salesforce Sales Cloud

By Salesforce

4.3 (4,391,167)
MD (80px avatar) — DEFAULT
Product placeholder
Slack

By Slack Technologies

4.6 (23,891)
LG (104px avatar) — expanded views
Product placeholder
Zoom Meetings

By Zoom Video Communications

4.5 (15,234)

Accordion

Expand/collapse sections for FAQs, settings, and content panels. Click headers or use keyboard navigation. View detailed docs

Multi-Open Mode
Single-Open Mode
Manage your profile, email preferences, and notification settings.

Tabs

Switch between content sections with keyboard navigation (arrow keys, Home, End). View detailed docs

Basic Tabs

Overview: This product helps teams collaborate more effectively with real-time messaging, file sharing, and video calls.

Tables

Display structured data with proper styling, alternating rows, and hover states. Supports sortable columns and compact variants. View detailed docs

Basic Table
Product Category Rating Reviews Price
HubSpot CRM CRM Software 4.5 12,345 Free
Salesforce CRM Software 4.3 18,567 $25/user/mo
Slack Team Chat 4.6 23,891 $8/user/mo
Zoom Video Conferencing 4.5 15,234 $15/user/mo
Sortable Table

Click column headers to sort

Product Category Rating Reviews
HubSpot CRM CRM Software 4.5 12,345
Salesforce CRM Software 4.3 18,567
Slack Team Chat 4.6 23,891
Zoom Video Conferencing 4.5 15,234
Asana Project Management 4.4 11,890
Compact Variant

Denser spacing for data-heavy views

Name Email Role Status
Jane Doe jane@example.com Admin Active
John Smith john@example.com User Active
Alice Johnson alice@example.com User Inactive
With Product Avatars

Product logos in first column

Logo Product Rating Reviews
HubSpot CRM
HubSpot CRM 4.5 12,345
Salesforce
Salesforce 4.3 18,567
Slack
Slack 4.6 23,891
With Product Details

Horizontal product_details--xs in table cells

Product Reviews Price
HubSpot CRM
HubSpot CRM
4.5 (12,345)
12,345 Free
Salesforce
Salesforce
4.3 (18,567)
18,567 $25/user/mo
Slack
Slack
4.6 (23,891)
23,891 $8/user/mo

Slide-Out Panel

Full-height modal variant that slides in from the right. Native dialog element with slide animation, responsive sizing, focus trap, and accessibility features. View detailed docs

Third Screen (33% on desktop)

Mobile 100%, Tablet 50%, Desktop 33%

Half Screen (Default)

Mobile 100%, Tablet+ 50%

Full Screen

100% on all viewports

Tooltips

Contextual help on hover or focus. 300ms hover delay, immediate on focus, Esc to dismiss. View detailed docs

Position Variants
In Context
Satisfaction Score
94%

Alerts & Messages

✓ Success: Your changes have been saved.

✕ Error: Something went wrong. Please try again.

ℹ Info: This is an informational message.

Toggle Switch

Full documentation →

⚠ Warning: Please review before proceeding.

Form Inputs

All form inputs match DESIGN.md specifications with proper focus, error, and disabled states. View detailed docs

Search Input
search

Full documentation →

Text Input (Default)
Text Input (Error State)
Text Input (Disabled)
Textarea

Full documentation →

Date Picker
calendar_today
Su
Mo
Tu
We
Th
Fr
Sa

Click to select a date • Full documentation →

Select Input (Default)
expand_more

Full documentation →

Select Input (Error State)
expand_more

This field is required

Select Input (Disabled)
expand_more
File Upload
upload_file
Drag and drop files here
or click to browse

Full documentation →

Sample Form

Contact Us

expand_more
Checkboxes

Full documentation →

Radio Buttons

Full documentation →

Enhanced Selects

Searchable single and multi-select powered by Select2 with Elevate vendor theme. View detailed docs →

Single Select
Multi Select
Small
Large
Multi Select (Small)
No Search

Background Colors

Primary

Neutral 10

Neutral 20

Success

Critical

Info

Spacing Scale

Common Spacing Values (1 unit = 0.25rem)
1
0.25rem
2
0.5rem
4
1rem
6
1.5rem
8
2rem

G2 Topbar Navigation

The global G2.com top navigation bar. Logged-out state shown — logged-in buyer and seller variants require the dropdown_menu component (Phase 3.3). View standalone template →

Component Specs
Height72px
Logo52×52px, #ff492c
Border1px solid #a7a7ac
Nav links15px, semibold
User statesLogged out ✅ · Logged in buyer 🔜 · Logged in seller 🔜
AuditG2_NAVIGATION_AUDIT.md (2,804 lines)

Buyer Profile Navigation

My G2 sidebar navigation for buyer profiles (g2.com/users/:id). Shows own-profile (full tabs), public-profile (limited), and mobile variants. View standalone template →

Component Specs
Active statepurple-10 pill bg, 24px radius, purple text
Tab icons24px, 10 unique icons mapped to tabs
VariantsOwn profile (10 tabs) · Public (5 tabs) · Mobile
AuditMY_G2_NAVIGATION_AUDIT.md — Variant A

Vendor Admin Shell

My G2 seller dashboard shell — 60px headnav with product switcher + 72px/240px collapsible navy sidenav with 12 nav sections. Click the arrow in the sidenav to toggle expanded/collapsed. View standalone template →

Component Specs
Headnav height60px, fixed, white, z-index 102
Sidenav collapsed72px, navy (#062846), icon-only
Sidenav expanded240px (72 + 168), labels visible
Transition0.5s cubic-bezier(0.86, 0, 0.07, 1)
Nav sections12: Home, Profile, Reviews, Buyer Activity, Ads, Marketing, Analytics, Integrations, MI, ROI, Account, Sales Call Brief
AuditMY_G2_NAVIGATION_AUDIT.md — Variant B

Teams Portal Navigation

My G2 Teams Portal admin sidebar (my.g2.com/organizations/:id/). Dark navy sidebar with 6 flat nav items. View standalone template →

Component Specs
Sidebar width240px
Backgroundnavy-100 (dark)
Items6: Users, Groups, Products, SSO, OAuth Apps, Resources
AuditMY_G2_NAVIGATION_AUDIT.md — Variant C

View full documentation in ELEVATE_COMPONENTS.md

Linked to UE Elevate · Auto-updated · Lookbook

Third Screen Panel

33% on desktop, 50% on tablet, 100% on mobile

This panel uses the elv-slide-out-panel--third size variant.

It adapts to screen size:

  • Desktop (1024px+): 33.33% width
  • Tablet (768px-1023px): 50% width
  • Mobile (<768px): 100% width

Perfect for lightweight contextual information, compact forms, or quick actions.

Try it: Resize your browser window to see the responsive behavior. The panel maintains full height but adjusts width based on viewport size.

Half Screen Panel (Default)

50% on tablet+, 100% on mobile

This is the default panel size using elv-slide-out-panel--half.

When to use Half Screen:

  • Standard forms and data entry
  • Content editing workflows
  • Multi-field forms
  • Detail views with moderate content

Scrollable Content

The body section is scrollable when content exceeds the viewport height. The header and footer remain fixed while the body scrolls.

Scroll down to see more content...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Keep scrolling...

Almost there...

You've reached the bottom of this demo content!

Notice how the header and footer stayed in place while you scrolled.

Full Screen Panel

100% width on all viewports

This panel uses elv-slide-out-panel--full to occupy the entire viewport width.

When to use Full Screen:

  • Complex multi-step workflows
  • Rich content editing (WYSIWYG editors, etc.)
  • Data-heavy interfaces (tables, charts)
  • Immersive experiences requiring maximum space

Key Features

Slide Animation

Smoothly slides in from the right edge over 500ms with ease-in-out easing.

Focus Trap

Tab key cycles through focusable elements within the panel. Try it by pressing Tab!

Keyboard Navigation

Press ESC to close. Focus automatically returns to the trigger button.

Click Outside to Close

Clicking the semi-transparent backdrop closes the panel.

Delete Item

This action cannot be undone

Are you sure you want to delete this item? This action is permanent and cannot be reversed.

Create New Project

Enter project details to get started

This is the default modal size using elv-modal--md with a max-width of 560px.

When to use Medium Modal:

  • Standard forms with 3-5 fields
  • Confirmation dialogs with moderate content
  • Settings or preferences panels
  • General-purpose dialogs

Key Features

Centered Position

Modal is centered both vertically and horizontally on screen.

Fade Animation

Smoothly fades in over 200ms with a subtle scale effect.

Review Submission

800px wide modal for content-rich interfaces

This large modal uses elv-modal--lg with a max-width of 800px.

When to use Large Modal:

  • Complex forms with 6+ fields or multiple sections
  • Content-rich dialogs with tables, lists, or cards
  • Multi-step wizards requiring more horizontal space
  • Preview or review screens with detailed information

Scrollable Content Demo

The body section is scrollable when content exceeds the viewport height. The header and footer remain fixed while the body scrolls.

Scroll down to see more content...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Keep scrolling...

You've reached the bottom!

Notice how the header and footer stayed in place while you scrolled.

Data Analysis Dashboard

1000px wide modal for complex interfaces

This extra large modal uses elv-modal--xl with a max-width of 1000px.

When to use Extra Large Modal:

  • Multi-column layouts requiring significant horizontal space
  • Data-heavy interfaces with tables, charts, or dashboards
  • Rich text editors or WYSIWYG interfaces
  • Complex configuration screens with many options
  • Side-by-side comparisons or before/after views

Accessibility Features

Focus Trap

Tab key cycles through focusable elements within the modal. Try it by pressing Tab!

Keyboard Navigation

Press ESC to close. Focus automatically returns to the trigger button.

Click Outside to Close

Clicking the semi-transparent backdrop closes the modal (unless disabled).

ARIA State Management

Screen readers announce modal opening/closing via aria-expanded and aria-modal.