Design KitComponentv0.3.0

QuickAnswerBlock

Highlighted summary block designed for SEO snippets with thick borders.

All componentsKit overviewContact

When to use

Use at the top of long articles to provide an immediate tldr; answer.

Import

Import
tsx
import QuickAnswerBlock from "@/components/QuickAnswerBlock";

Example

Example
tsx
// See import QuickAnswerBlock from "@/components/QuickAnswerBlock"; for import usage.

Live preview

Quick answer

What is MHC Kit?

This is a quick answer block used to immediately provide answers or TLDRs at the top of long tutorials.

People also ask

Where do I import QuickAnswerBlock from?

Use: import QuickAnswerBlock from "@/components/QuickAnswerBlock";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.

ContactAll components