Site components | Amplitude

This page demonstrates the reusable components available in Amplitude's documentation system. Use these components to create consistent, well-styled content across all documentation.

Admonitions

Admonitions are styled callout boxes for important information. They support multiple types.

Note admonition

Note heading

This is a note admonition. Use it for additional information that supplements the main content.

Tip admonition

Pro tip

Use tip admonitions to share best practices and helpful suggestions that improve the user experience.

Warning admonition

Important warning

Use warning admonitions to alert users about potential issues, breaking changes, or actions that require caution.

Example admonition

Example scenario

Use example admonitions to show concrete use cases or sample implementations.

Code in admonitions

Code block example

import { Experiment } from '@amplitude/experiment-js-client';

// Initialize the experiment client
const experiment = Experiment.initializeWithAmplitudeAnalytics(
    'DEPLOYMENT_KEY'
);

// Fetch variants
await experiment.fetch();

// Lookup a flag's variant
const variant = experiment.variant('FLAG_KEY');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

Inline code in admonitions

Inline code reference

Use the experiment.fetch() method to retrieve all variants. The variant() method accepts a FLAG_KEY parameter.

Card grid (two-column layout)

Card grids display content side-by-side for easy comparison. Perfect for showing good vs. bad code examples.

Good vs. bad code comparison

Good

amplitude.track('Purchase Completed', {
  product_id: 'SKU_12345',
  product_name: 'Premium Subscription',
  revenue: 29.99,
  currency: 'USD'
});

Uses descriptive event names and structured properties

Bad

amplitude.track('clicked', {
  data: 'some_product'
});

Vague event name with unstructured data

Configuration comparison

Good

amplitude.init('API_KEY', {
  serverZone: 'US',
  minIdLength: 5,
  defaultTracking: {
    sessions: true,
    pageViews: true,
    formInteractions: false
  },
  logLevel: 'Warn'
});

Production-ready configuration with error handling

Bad

amplitude.init('API_KEY');

Missing important configuration options

Plain cards without labels

Option A: Client-side tracking Track events directly from your web application. This approach is simpler but exposes your API key in client-side code.

Easy to implement
Real-time tracking
Limited security

Option B: Server-side tracking Send events from your backend servers. This approach is more secure but requires additional infrastructure.

Enhanced security
Better data quality
More complex setup

Custom labels

Recommended

amplitude.set_group('company_id', 'acme_corp')
amplitude.track('Feature Used', {
    'feature_name': 'advanced_analytics'
})

Alternative

amplitude.track('Feature Used', {
    'feature_name': 'advanced_analytics',
    'company_id': 'acme_corp'
})

Procedure component

The procedure component displays step-by-step instructions with numbered circles. Perfect for walkthroughs and tutorials.

Configure API authentication

Navigate to Settings > API Keys.
Select Create New Key.
Enter a descriptive name for your API key (for example, "Production App" or "Development Environment").
Copy the generated key and store it securely.
Add the key to your application's environment variables:
```
export AMPLITUDE_API_KEY="your_api_key_here"
```
Test the connection by sending a test event.

Procedure with code blocks

Initialize the SDK

Install the Amplitude SDK:

npm install @amplitude/analytics-browser

Import the SDK in your application:

import * as amplitude from '@amplitude/analytics-browser';

Initialize with your API key:

amplitude.init('YOUR_API_KEY', {
  defaultTracking: true
});

Verify initialization by checking the browser console for confirmation messages.

Nested lists in procedures

Set up user properties

Define your user properties schema:
- User ID (required)
- Email address
- Account tier (Free, Pro, Enterprise)
- Registration date

Set properties when users sign up:

amplitude.setUserId(userId);
const identify = new amplitude.Identify();
identify.set('email', userEmail);
identify.set('account_tier', 'Pro');
amplitude.identify(identify);

Update properties when they change (for example, during upgrades).
Verify properties appear in the Amplitude dashboard under User Lookup.

Two-column lists

Two-column lists automatically distribute list items across two columns on wider screens. On mobile devices, they display as a single column.

Auto-wrapping two-column list

Real-time event tracking
User identification
Session management
Revenue tracking
User properties
Group analytics
A/B testing support
Custom event properties
Offline event queueing
GDPR compliance tools
Cross-platform tracking
Data enrichment

Manual column control

For precise control over which items appear in each column, use ---SPLIT--- as a separator:

Analytics features:

Event tracking
User properties
Revenue analytics
Funnel analysis
Retention tracking
Cohort analysis

Developer features:

TypeScript support
Multiple SDKs
Batch event sending
Plugin system
Error handling
Debug mode

Tabs

Tabs organize related content into selectable panels. Perfect for showing platform-specific instructions.

const amplitude = require('@amplitude/analytics-node');

amplitude.init('API_KEY');
amplitude.track({
  event_type: 'Button Clicked',
  user_id: 'user_123',
  event_properties: {
    button_name: 'Sign Up'
  }
});

import * as amplitude from '@amplitude/analytics-node';

amplitude.init('API_KEY');
amplitude.track({
  event_type: 'Button Clicked',
  user_id: 'user_123',
  event_properties: {
    button_name: 'Sign Up'
  }
});

from amplitude import Amplitude

client = Amplitude('API_KEY')
client.track({
    'event_type': 'Button Clicked',
    'user_id': 'user_123',
    'event_properties': {
        'button_name': 'Sign Up'
    }
})

Collapse

Collapsible sections hide detailed content until users need it. Great for optional information or lengthy reference material.

Advanced configuration options

Configure advanced SDK options to customize behavior:

amplitude.init('API_KEY', {
  // Network options
  serverZone: 'US',
  serverUrl: 'https://api.amplitude.com',
  useBatch: true,
  
  // Event options
  minIdLength: 5,
  partnerId: 'partner_123',
  
  // Tracking options
  defaultTracking: {
    sessions: true,
    pageViews: true,
    formInteractions: true,
    fileDownloads: true
  },
  
  // Privacy options
  optOut: false,
  trackingOptions: {
    ipAddress: true,
    language: true,
    platform: true
  }
});

See the Browser SDK configuration for complete details.

Combining components

You can combine multiple components for rich, structured documentation.

Best practices for event tracking

Follow these guidelines when implementing event tracking:

Event tracking workflow

Define your tracking plan with clear event names.

Implement events using the recommended patterns:

Good

amplitude.track('Checkout Started', {
  cart_total: 99.99,
  item_count: 3
});

Bad

amplitude.track('event_1', {
  val: 99.99
});

Test your implementation in development.
Deploy to production and monitor in the Amplitude dashboard.

Component syntax reference

Quick reference table

Component	Partial Name	Key Parameters
Admonition	`partial:admonition`	`type`, `heading`
Card Grid	`partial:card-grid`	(container only)
Card	`partial:card`	`style`, `label`, `caption`
Procedure	`partial:procedure`	`title`
Two-Column List	`partial:two-column-list`	(none)
Two-Column Grid	`partial:two-column-list-grid`	(use ---SPLIT--- separator)
Tabs	`partial:tabs`	`tabs` (comma-separated)
Tab	`partial:tab`	`name`
Collapse	`partial:collapse`	`name`

Admonition types

note - Blue, for supplementary information
tip - Green (mint), for best practices
warning - Orange, for cautions and important notes
example - Pink, for examples and use cases
info - Teal, for general information
beta - Purple, for beta features
alpha - Purple, for alpha features
deprecated - Red, for deprecated features

Card styles

plain - Gray border, white background
tip - Green border, mint background
warning - Orange border, light orange background

Card labels

good - Green checkmark icon
bad - Red X icon
Custom text - No icon, just text