Skip to content

Priority Badges - Visual Demo#

This page shows exactly what priority badges look like on your MkDocs site.

You can see an example page here.

Individual Requirement Page#

When viewing a requirement document, badges appear automatically after the title:

Example: Plant Database Requirement#

Plant Database#

CRITICAL Phase 1 Approved

Purpose: Plant data model, storage, and basic display

Context: Foundation for entire system - all other features depend on plant data existing.

Example: Weather Integration Requirement#

Weather Integration#

MEDIUM Phase 3 In Review

Purpose: Weather data integration, alerts, and protection planning

Context: Protects user plants from weather damage.

Example: Admin Account Management Requirement#

Admin Account Management#

LOW Phase 7 Draft

Purpose: System admin and community lead account management

Context: Highest security risk - currently de-prioritized per REQ-000b.

Requirements Index Page#

Priority Legend#

CRITICAL Foundation features - blocking other work
HIGH Core functionality - needed for MVP
MEDIUM Important features - can be phased
LOW Nice-to-have - deferred to later

Requirement Cards#

Plant Database

CRITICAL Phase 1 Approved

Plant data model, storage, and basic display. Foundation for entire system - all other features depend on this.

View Requirement →

Plant Search

CRITICAL Phase 1 Draft

Search functionality for finding plants by name. Primary discovery mechanism for all users.

View Requirement →

Frost Date Calculations

HIGH Phase 2 Draft

Calculate frost dates and planting dates based on USDA zone. Critical for location-based planting guidance.

View Requirement →

Weather Integration

MEDIUM Phase 3 In Review

Weather data integration, alerts, and protection planning. Helps users protect plants from weather damage.

View Requirement →

Admin Account Management

LOW Phase 7 Draft

System admin and community lead account management. Highest security risk, currently de-prioritized.

View Requirement →

Inline Badge Usage#

You can also use badges inline in lists:

By Priority#

Critical Priority Requirements:

  • Plant Database CRITICAL
  • Plant Search CRITICAL
  • Plant Filter CRITICAL

High Priority Requirements:

  • Frost Date Calculations HIGH
  • USDA Zone Integration HIGH

Medium Priority Requirements:

  • Weather Integration MEDIUM
  • User Notifications MEDIUM
  • General Resources MEDIUM

Low Priority Requirements:

  • Admin Account Management LOW
  • Educator Role LOW
  • Elevated Access LOW

Mobile View#

Badges adapt to smaller screens:

Plant Database#

CRITICAL Phase 1

Plant data model and storage...

Dark Mode#

Badges automatically adapt to dark mode:

Plant Database#

CRITICAL Phase 1 Approved

Purpose: Plant data model, storage, and basic display

Context: Foundation for entire system

ASCII Preview (No CSS)#

If you can't render the HTML above, here's what the badges look like in plain text:

┌─────────────────────────────────────────────────────────────────┐
│ Plant Database                                                  │
│ [  CRITICAL  ] [ Phase 1 ] [ Approved ]                         │
│                                                                 │
│ Purpose: Plant data model, storage, and basic display           │
│ Context: Foundation for entire system                           │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ Weather Integration                                             │
│ [  MEDIUM  ] [ Phase 3 ] [ In Review ]                          │
│                                                                 │
│ Purpose: Weather data integration and alerts                    │
│ Context: Protects user plants from weather damage               │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ Admin Account Management                                        │
│ [   LOW   ] [ Phase 7 ] [ Draft ]                               │
│                                                                 │
│ Purpose: System admin and community lead management             │
│ Context: Highest security risk - currently de-prioritized       │
└─────────────────────────────────────────────────────────────────┘

Color Reference#

Priority Colors#

Badge Background Border Text Use Case
CRITICAL #ef4444 (Red) #dc2626 (Dark Red) White Foundation, blocking
HIGH #f97316 (Orange) #ea580c (Dark Orange) White Core MVP features
MEDIUM #eab308 (Yellow) #ca8a04 (Gold) Dark Important, phased
LOW #22c55e (Green) #16a34a (Dark Green) White Deferred, nice-to-have

Status Colors#

Badge Background Border Text
Draft #9ca3af (Gray) #6b7280 White
In Review #3b82f6 (Blue) #2563eb White
Approved #10b981 (Green) #059669 White
Implemented #8b5cf6 (Purple) #7c3aed White

Testing Your Badges#

To see these badges live on your site:

  1. Start MkDocs:
mkdocs serve
  1. Visit this page:
http://localhost:8000/tutorials/mkdocs/priority-badges-visual-demo/

  1. Create a test requirement:

  2. Copy docs/templates/requirements-template.md

  3. Save as docs/requirements/req-test-example.md
  4. Fill in the YAML front matter
  5. View at http://localhost:8000/requirements/req-test-example/

Next: See Priority Badges Setup Guide for configuration details.