Component Examples

Visual reference for all MDX content components available in TalentOperations.io docs.

5 min read

Decision Summary

Use DecisionSummary at the top of pages that describe a specific decision or framework. It gives readers a compact executive overview before they dive into details.

Decision Summary

When to use

When you need to convert raw pipeline data into expected talent demand per capability. Typically run weekly or when pipeline changes significantly.

Inputs

CRM pipeline deals with stage and estimated effort
Operational weight table (stage-based)
Capability taxonomy

Outputs

Expected demand per capability per time horizon
Demand confidence intervals
Hiring trigger recommendations

Common mistakes

Using unweighted pipeline totals as demand forecast
Ignoring stage regression rates
Not updating weights when win-rate data is available

Formula Card

Use FormulaCard to present a formula with copy support, explanation, and optional collapsible assumptions and examples.

Risk-Weighted Demand

Expected Demand = Effort (FTE-weeks) × Operational Weight

Multiply the estimated effort for each deal by the probability-weighted stage factor. This converts raw pipeline into realistic demand that can be compared against supply.

Collapsed Section

Use CollapsedSection for supplementary detail like proofs, edge cases, or extended explanations that would interrupt the main flow.

Scenario Toggle

Use Scenario to present the same concept at two complexity levels: one for quick understanding, one for full detail.

Bench Cost Calculation

Simple version: Bench cost = number of unbilled people multiplied by their daily rate, multiplied by the number of bench days.

If you have 3 consultants on the bench for 10 days at $800/day, your bench cost is $24,000.

Note: Start with the simple version. Move to the complex model once you have loaded cost data and want to optimize internal utilization.

Mermaid Diagram

Use MermaidDiagram to render flowcharts and sequence diagrams with copy-to-clipboard support and a toggleable source view.

Demand-to-Talent Flow

Enhanced Code Block

All fenced code blocks in MDX now render with a language label and a copy button automatically. You can also use the EnhancedCodeBlock component directly.

demand_forecast.py

def calculate_weighted_demand(deals, weights):
  """Calculate risk-weighted demand from pipeline deals."""
  demand_by_capability = {}

  for deal in deals:
      cap = deal["capability"]
      effort = deal["effort_fte_weeks"]
      stage = deal["stage"]
      weight = weights.get(stage, 0.0)

      weighted = effort * weight
      demand_by_capability[cap] = demand_by_capability.get(cap, 0) + weighted

  return demand_by_capability

Data Model Table

Use DataModelTable to document schemas, data models, or API field definitions in a clean, scannable format.

Deal Pipeline Record

Field	Type	Required	Description
`deal_id`	`string`	Yes	Unique identifier from CRM (e.g., HubSpot deal ID)
`capability`	`string`	Yes	Primary capability required (maps to competency taxonomy)
`effort_fte_weeks`	`number`	Yes	Estimated implementation effort in FTE-weeks
`stage`	`enum`	Yes	Pipeline stage: discovery \| qualified \| proposal \| verbal \| signed
`expected_start`	`date`	No	Projected engagement start date
`confidence_override`	`number`	No	Manual weight override (0.0-1.0). Takes precedence over stage-based weight when set.
`tags`	`string[]`	No	Freeform labels for filtering (e.g., 'strategic', 'renewal', 'multi-cap')

Callout (existing)

For reference, the existing Callout component continues to work as before:

This is an info callout. Use it for supplementary context that supports the main content.

This is a warning callout. Use it when readers might make an easy mistake.

This is a success callout. Use it for confirmed best practices or validated approaches.

This is an error callout. Use it for critical warnings or known failure modes.