Styles
An interactive catalog of the site's reusable blocks and their variants.
ArticleCard Default
A reusable card for articles, talks, and interviews.
ArticleCard Linked banner
ArticleCard Tagged banner
A reusable card for articles, talks, and interviews.
ArticleCard Thumbnail
A reusable card for articles, talks, and interviews.
ArticleCard With actions
The action area composes other blocks without changing the card renderer.
Button Default
Button Control
Button Cross-link
Button Primary
Button Video
CalloutLink Default
CalloutLink Control
CalloutLink Cross-link
CalloutLink Primary
CalloutLink Video
ExampleCard Default
Example
A concise example with supporting information.
ExampleCard Complete
Complete example
All optional content can be combined in one card.
<article>Example</article>ExampleCard Linked
Linked example
An optional link provides the next action.
Explore modern web featuresExampleCard Titled
Delivery example
A card with an explicit title.
ExampleCard With code
Code example
Code is shown when both a language and source are provided.
const greeting = 'Hello, world!';
console.log(greeting);ExampleCard With metadata
Modernisation outcome
Metadata highlights structured facts about the example.
ExampleCard With tags
Example
Tags provide a compact list of related topics.