diff --git a/src/components/Layout/mdx/Admonition.tsx b/src/components/Layout/mdx/Admonition.tsx index 0cd499a8d6..bde12dd358 100644 --- a/src/components/Layout/mdx/Admonition.tsx +++ b/src/components/Layout/mdx/Admonition.tsx @@ -4,7 +4,7 @@ import Aside from '../../blocks/dividers/Aside'; const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'public-preview']; -type AdmonitionVariant = 'neutral' | 'note' | 'further-reading' | 'important' | 'warning'; +type AdmonitionVariant = 'neutral' | 'note' | 'further-reading' | 'important' | 'warning' | 'usp'; interface AdmonitionProps extends React.HTMLAttributes { 'data-type'?: AdmonitionVariant; @@ -44,6 +44,11 @@ const admonitionConfig: Record< backgroundColor: 'bg-yellow-100 dark:bg-yellow-800', title: 'Warning', }, + usp: { + borderColor: 'border-l-orange-600 dark:border-l-orange-600', + backgroundColor: '', + title: '', // USP callouts don't use a title prefix - the content includes the headline + }, }; const Admonition: React.FC = ({ 'data-type': dataType = 'note', children, className, ...rest }) => { @@ -54,6 +59,26 @@ const Admonition: React.FC = ({ 'data-type': dataType = 'note', const { borderColor, backgroundColor, title } = admonitionConfig[dataType]; + // USP callouts have a different structure - no title prefix, content includes the headline + if (dataType === 'usp') { + return ( + + ); + } + return ( + Ably is a highly-scalable serverless WebSocket platform used to power realtime digital experiences. At its core, Ably is a cloud-based Pub/Sub (publish/subscribe) platform-as-a-service (PaaS). It ensures that any messages published to Ably by any device will be received, in realtime, by any number of subscribing devices.