Content helpers
Provider identity, copyable code examples, and the eyebrow metadata line.
Example
A representative composition rendered with the published package API.
Press release —
Conscia appoints a new managing director
import { ProviderMark } from "@conscia-labs/design-system";
<ProviderMark name="Amazon Bedrock" />Constrained container
A narrow card or desktop rail keeps the format choices and copy action available.
const response = await fetch("/api/models", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "example-model", prompt: "Summarize the current deployment status." }) });Options
The decisions most consumers need to make when adopting this family.
CodeBlockUse selectorLabel when the choices represent steps, examples, or formats rather than programming languages.
ProviderMarkShow the provider name next to its short mark and use the description for current context.
EyebrowThe conscia.com metadata line, "CASE — OCTOBER 8, 2026", above a card or article title. Pass dateTime when meta is a date.
| Option | Values or anatomy | Guidance |
|---|---|---|
CodeBlock | snippets · defaultValue · selectorLabel (default: Code language) · copyLabel | Use selectorLabel when the choices represent steps, examples, or formats rather than programming languages. |
ProviderMark | name · shortName · description | Show the provider name next to its short mark and use the description for current context. |
Eyebrow | category · meta · dateTime | The conscia.com metadata line, "CASE — OCTOBER 8, 2026", above a card or article title. Pass dateTime when meta is a date. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { CodeBlock, Eyebrow, ProviderMark } from "@conscia-labs/design-system";