Style Guide

A visual reference of every component and text style available in the documentation.

This page showcases all available components, text styles, and formatting options. Use it as a reference when writing documentation or reviewing designs.

Typography#

The page title above is Heading 1 — it renders automatically from the frontmatter title field. This section header is Heading 2.

Heading Level 3#

Use H3 for subsections within a page. It uses medium weight and slightly smaller size.

Heading Level 4#

Use H4 for grouping content within a subsection. It uses medium weight and muted color.

Regular paragraph text looks like this. It uses the default body style with comfortable line height for readability. You can use bold text for emphasis, italic text for subtle emphasis, and inline code for technical terms like campaign_id or npm install.

Links look like this example link and change on hover.

Lists#

Unordered List#

Dashboard for managing organizations and campaigns
Payment processing powered by Stripe
Kiosk devices for in-person donations
- Tablet-based kiosks
- Standalone terminals
API access for custom integrations

Ordered List#

Create an organization
Configure your payment settings
1. Connect your Stripe account
2. Set your default currency
3. Enable test mode for development
Launch your first campaign
Share your donation page

Blockquote#

Good documentation is like a good API — it should be intuitive, consistent, and hard to misuse. Design your docs for the reader who is in a hurry.

Table#

Method	Endpoint	Description
GET	`/v1/campaigns`	List all campaigns
POST	`/v1/campaigns`	Create a new campaign
GET	`/v1/campaigns/:id`	Retrieve a campaign
PATCH	`/v1/campaigns/:id`	Update a campaign
DELETE	`/v1/campaigns/:id`	Delete a campaign

Code Blocks#

// JavaScript — Fetch campaigns from the API
const response = await fetch('https://api.nizam.co/v1/campaigns', {
  headers: {
    'Authorization': 'Bearer nzm_test_key_abc123',
    'Content-Type': 'application/json',
  },
})

const { data } = await response.json()
console.log(`Found ${data.length} campaigns`)

# Python — Create a new donation
import requests

response = requests.post(
    'https://api.nizam.co/v1/donations',
    headers={'Authorization': 'Bearer nzm_test_key_abc123'},
    json={
        'campaign_id': 'camp_123',
        'amount': 5000,
        'currency': 'usd',
        'donor_email': 'donor@example.com',
    },
)

donation = response.json()
print(f"Donation {donation['id']} created")

# Bash — Install the CLI and authenticate
npm install -g @nizam/cli
nizam auth login
nizam campaigns list --org org_abc123

Callouts#

Information

Use info callouts to highlight helpful context or background information that supports the reader's understanding.

Warning

Use warning callouts to flag potential issues, breaking changes, or actions that require caution before proceeding.

Error

Use error callouts for critical issues, common mistakes, or actions that could result in data loss or security problems.

Success

Use success callouts to confirm that a step was completed correctly or to highlight best practices.

Cards#

Organizations

Create and manage your organization's profile, team members, and settings.

Campaigns

Launch fundraising campaigns with customizable goals, deadlines, and donation tiers.

Donations

Process one-time and recurring donations with real-time tracking and receipts.

Webhooks

Receive real-time notifications when events happen in your Nizam account.

Steps#

Create your organization

Sign up at nizam.co and create your organization. You'll need your organization's name, tax ID, and a contact email address.

Connect payment processing

Navigate to Settings > Payments and connect your Stripe account. This enables you to accept donations immediately. Use test mode during development.

Launch your first campaign

Go to Campaigns > New and fill in your campaign details. Set a goal amount, add a description, and publish. Your donation page is ready to share.

Tabs#

const nizam = require('@nizam/sdk')

const client = new nizam.Client({
  apiKey: 'nzm_test_key_abc123',
})

const campaign = await client.campaigns.create({
  name: 'Ramadan Campaign 2025',
  goal: 50000,
  currency: 'usd',
})

from nizam import Client

client = Client(api_key='nzm_test_key_abc123')

campaign = client.campaigns.create(
    name='Ramadan Campaign 2025',
    goal=50000,
    currency='usd',
)

curl https://api.nizam.co/v1/campaigns \
  -H "Authorization: Bearer nzm_test_key_abc123" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Ramadan Campaign 2025",
    "goal": 50000,
    "currency": "usd"
  }'

Hover Cards#

Hover over a highlighted term to see its definition. Use these for inline glossary terms that need context without leaving the page.

Each request must include a valid API key in the Authorization header. You can create keys from the Dashboard under Settings.