Skip to content

Add inline <code> support to Card, Rver and CTA banner components #1266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rezrah merged 7 commits into from
Feb 25, 2026
Merged

Add inline <code> support to Card, Rver and CTA banner components #1266

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2c5cde8
add inline code support to card, river and cta banner
rezrah Feb 24, 2026
93788b0
fix responsive behaviour
rezrah Feb 24, 2026
bb2c814
apply design adjustments
rezrah Feb 24, 2026
9d98aae
add snapshots
rezrah Feb 24, 2026
61cec1e
apply qa feedback
rezrah Feb 25, 2026
7973eb1
Merge branch 'main' of github.com:primer/brand into rezrah/add-code-t…
rezrah Feb 25, 2026
fcbb0e2
fix merge conflict
rezrah Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .changeset/sharp-kiwis-sneeze.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
'@primer/react-brand': patch
---

Improved inline `<code>` support and appearance in `Card`, `River` and `CTABanner` components.

```jsx
<Card>
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel.
</Card.Description>
</Card>
```
100 changes: 100 additions & 0 deletions packages/react/src/CTABanner/CTABanner.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,3 +349,103 @@ export const WithImageAtMobileViewport = () => <WithImageExample />
WithImageAtMobileViewport.globals = {
viewport: {value: 'iphonexr'},
}

export const WithInlineCodeElement = () => (
<Stack direction="vertical" gap="spacious" padding="none">
<Stack direction="vertical" gap="normal">
<Text as="p">Default variant:</Text>
<CTABanner>
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
</CTABanner>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Custom background color:</Text>
<CTABanner backgroundColor="default" hasBorder>
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
</CTABanner>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Balanced variant:</Text>
<CTABanner variant="balanced">
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
<CTABanner.Image src={placeholderImage} alt="Blank image" />
</CTABanner>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Minimal variant:</Text>
<CTABanner variant="minimal">
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
</CTABanner>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Dark mode:</Text>
<ThemeProvider colorMode="dark">
<Section backgroundColor="default">
<CTABanner>
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
</CTABanner>
</Section>
</ThemeProvider>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Start aligned with border:</Text>
<CTABanner align="start" hasBorder>
<CTABanner.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</CTABanner.Heading>
<CTABanner.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
once.
</CTABanner.Description>
<CTABanner.ButtonGroup>
<Button>Get started</Button>
</CTABanner.ButtonGroup>
</CTABanner>
</Stack>
</Stack>
)
37 changes: 37 additions & 0 deletions packages/react/src/CTABanner/CTABanner.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,3 +220,40 @@
width: 100%;
height: auto;
}

.CTABanner-heading code,
.CTABanner-description code {
font-size: inherit;
font-family: var(--brand-fontStack-monospace);
background-color: var(--brand-color-canvas-default);
padding: 0 var(--base-size-4) 0;
margin-inline: var(--base-size-2);
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
border-radius: var(--brand-borderRadius-small);
box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
}

.CTABanner--bgColor-default .CTABanner-heading code,
.CTABanner--bgColor-default .CTABanner-description code {
background-color: var(--brand-color-canvas-subtle);
}

.CTABanner-description code {
padding: 0 var(--base-size-4) 0;
}

.CTABanner-heading.CTABanner-heading:has(code) {
line-height: calc(1lh * 2);
}

.CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
line-height: calc(1lh * 2.8);
}

.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
line-height: calc(1lh * 1.9);
}

.CTABanner-description.CTABanner-description:has(code) {
line-height: calc(1lh * 1.25);
}
1 change: 1 addition & 0 deletions packages/react/src/CTABanner/CTABanner.module.css.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
declare const styles: {
readonly "CTABanner": string;
readonly "CTABanner--bgColor-default": string;
readonly "CTABanner--shadow": string;
readonly "CTABanner--variant-balanced": string;
readonly "CTABanner--variant-minimal": string;
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/CTABanner/CTABanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ const Root = forwardRef(
styles.CTABanner,
hasShadow && styles['CTABanner--shadow'],
styles[`CTABanner--variant-${variant}`],
styles[`CTABanner--bgColor-${backgroundColor}`],
className,
)}
style={{...backgroundStyles, ...style}}
Expand Down
10 changes: 10 additions & 0 deletions packages/react/src/CTABanner/CTABanner.visual.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,4 +199,14 @@ test.describe('Visual Comparison: CTABanner', () => {
await expect(page).toHaveScreenshot({fullPage: true})
})
})
test('CTABanner / With Inline Code Element', async ({page}) => {
await page.goto(
'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--with-inline-code-element&viewMode=story',
{waitUntil: 'networkidle'},
)
await page.locator('body.sb-show-main').waitFor({state: 'visible'})

await page.waitForTimeout(500)
await expect(page).toHaveScreenshot({fullPage: true})
})
})
Binary file added ...hots/Visual-Comparison-CTABanner-CTABanner-With-Inline-Code-Element-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 113 additions & 1 deletion packages/react/src/Card/Card.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import type {StoryFn, Meta} from '@storybook/react'
import {Card, CardIconColors} from '.'
import {Stack, LabelColors, Grid, ThemeProvider, Box, Section} from '..'
import {Stack, LabelColors, Grid, ThemeProvider, Box, Section, Text} from '..'
import placeholderImage from '../fixtures/images/placeholder.png'
import {CopilotIcon, ZapIcon, RocketIcon, GitBranchIcon, HeartIcon} from '@primer/octicons-react'
import {IconProps} from '../Icon'
Expand Down Expand Up @@ -437,3 +437,115 @@ TorchlightVariant.decorators = [
</ThemeProvider>
),
]

export const WithInlineCodeElement: StoryFn<typeof Card> = () => {
return (
<Stack direction="vertical" gap="spacious">
<Stack direction={{narrow: 'vertical', wide: 'horizontal'}} gap="normal">
<Stack direction="vertical" gap="normal">
<Text as="p">Default:</Text>
<Card href="https://github.com">
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Card.Description>
</Card>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">disableAnimation:</Text>
<Card href="https://github.com" disableAnimation>
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Card.Description>
</Card>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Minimal variant:</Text>
<Card href="https://github.com" variant="minimal">
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Card.Description>
</Card>
</Stack>
</Stack>
<Stack direction={{narrow: 'vertical', wide: 'horizontal'}} gap="normal">
<Stack direction="vertical" gap="normal">
<Text as="p">Torchlight variant (dark mode):</Text>
<ThemeProvider colorMode="dark">
<Box backgroundColor="default">
<Card href="https://github.com" variant="torchlight">
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple
models at once.
</Card.Description>
</Card>
</Box>
</ThemeProvider>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Center aligned with icon:</Text>
<Card href="https://github.com" hasBorder fullWidth align="center">
<Card.Icon icon={CopilotIcon} color="purple" hasBackground />
<Card.Heading>
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Card.Description>
</Card>
</Stack>
</Stack>
</Stack>
)
}

export const WithInlineCodeElementCustomDescriptionSize: StoryFn<typeof Card> = () => {
return (
<Stack direction={{narrow: 'vertical', wide: 'horizontal'}} gap="normal">
<Stack direction="vertical" gap="normal">
<Text as="p">Larger heading and description:</Text>
<Card href="https://github.com">
<Card.Heading size="5">
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
<Text size="400">
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Text>
</Card.Description>
</Card>
</Stack>
<Stack direction="vertical" gap="normal">
<Text as="p">Smaller heading and description:</Text>
<Card href="https://github.com">
<Card.Heading size="subhead-medium">
Use any <code>/model</code> parallelize with <code>/fleet</code>
</Card.Heading>
<Card.Description>
<Text size="100">
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models
at once.
</Text>
</Card.Description>
</Card>
</Stack>
</Stack>
)
}
WithInlineCodeElementCustomDescriptionSize.storyName = 'With inline code element + non-standard size overrides'
23 changes: 23 additions & 0 deletions packages/react/src/Card/Card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,29 @@
text-decoration: none !important;
}

.Card__link code,
.Card__description code {
font-size: inherit;
font-family: var(--brand-fontStack-monospace);
background-color: var(--brand-color-canvas-subtle);
padding: 0 var(--base-size-4) var(--base-size-2);
margin-inline: var(--base-size-2);
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
border-radius: var(--brand-borderRadius-small);
box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
}

.Card__description code {
padding: var(--base-size-2) var(--base-size-4) 0;
}
.Card__link:has(code) {
line-height: calc(1lh * 1.4);
}

.Card__description.Card__description:has(code) {
line-height: calc(1lh * 1.25);
}

.Card--disableAnimation:hover .Card__link {
text-decoration: underline !important;
}
Expand Down
22 changes: 22 additions & 0 deletions packages/react/src/Card/Card.visual.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,4 +204,26 @@ test.describe('Visual Comparison: Card', () => {
await page.waitForTimeout(500)
await expect(page).toHaveScreenshot({fullPage: true})
})

test('Card / With Inline Code Element', async ({page}) => {
await page.goto(
'http://localhost:6006/iframe.html?args=&id=components-card-features--with-inline-code-element&viewMode=story',
{waitUntil: 'networkidle'},
)
await page.locator('body.sb-show-main').waitFor({state: 'visible'})

await page.waitForTimeout(500)
await expect(page).toHaveScreenshot({fullPage: true})
})

test('Card / With inline code element + non-standard size overrides', async ({page}) => {
await page.goto(
'http://localhost:6006/iframe.html?args=&id=components-card-features--with-inline-code-element-custom-description-size&viewMode=story',
{waitUntil: 'networkidle'},
)
await page.locator('body.sb-show-main').waitFor({state: 'visible'})

await page.waitForTimeout(500)
await expect(page).toHaveScreenshot({fullPage: true})
})
})
Binary file added ...c.ts-snapshots/Visual-Comparison-Card-Card-With-Inline-Code-Element-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ison-Card-Card-With-inline-code-element-non-standard-size-overrides-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Image-carousel-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading