SponsorBlock. A clearly disclosed sponsor message and destination.
- Publishing
- Static
- Stability · Initial
- ::postkit-sponsor-block
Usage.
<SponsorBlock
name="Open Web Fund"
message="Supporting independent tools for durable, portable publishing."
href="#component-preview"
actionLabel="Meet the sponsor"
logoSrc="/component-preview.svg"
logoAlt="Open Web Fund"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| nameRequired | string | None | The sponsor name. |
| message | string | None | The sponsor message. |
| href | string | None | The sponsor destination. |
| actionLabel | string | "Learn more" | The sponsor action label. |
| logoSrc | string | None | The sponsor logo URL. |
| logoAlt | string | None | Alternative text for the sponsor logo. |
| disclosure | string | "Sponsored" | The commercial disclosure label. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- disclosure
- logo
- content
- name
- message
- action
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned