Content design kit

Style guide · Section 01 / 01

Content design kit.

A reusable set of MDX blocks — code cards, callouts, benches, compare strips, and more — for any docs page.

// Versionv2.2.82 LATEST

// Updatedtoday

// Reading time3 min · 1 section

// Components

10ready

Header, TL;DR strip, sections, code cards, callouts, compare, bench, API, checklist, pager.

// Imports needed

0in MDX

All components are registered as MDX globals.

// Read this if

You're writing a docs page and want the Carbon look.

01

Usage cheatsheet.

Difficulty · Beginner

Drop these into any .mdx file. No imports — they are registered globally via theme/MDXComponents.

Code card #code-card

example.gotested

func Example() {
  // your code here
}

Heads up.

Wrap inline identifiers in backticks. Swap type to warn or success.

Caveat.

Use this when the reader is about to make a destructive change.

Great pick.

Confirms the recommended path.

Before & after

Beforeslow path

Short description of the problem.

oldApi(x, y)

Afterrecommended

Short description of the fix.

F.NewApi(x, y)

Benchmarks

Benchmark · description$go test -bench=. -benchmem

Variant	Speed	ns/op	B/op	Δ
Baseline		14,820	96	baseline
Optimized		2,140	48	−85%

API

Symbol	Signature	Since
Foo	func Foo[A any](x A) A One-line description of the function.	v2.0
Bar	func Bar[A, B any](f func(A) B) func([]A) []B Lift a unary function over slices.	v2.2

Checklist

Steps1 / 3 complete

• First action itemrequired
• Second action itemhigh impact
• Third, optional actionsituational