houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve pricing card header [website] (#19385)

Browse Source 
## Summary
- Reduce the plan title size from `md` to `xs`
- Switch the pricing card header layout from grid to flex for tighter
title/price control
- Tighten the title line-height and add a `black/60` color override for
the `/month...` suffix
- Add a 4px gap between the price amount and suffix
- Reduce the illustration height to 80px and shift it slightly right on
desktop

## Testing
- Not run (not requested)

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas des Francs
2026-04-07 17:02:48 +02:00
committed by GitHub
parent d341d0d624
commit 91f8f7329a
1 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx
+45 -12
View File
@@ -4,6 +4,7 @@ import { Body, Heading, LinkButton } from '@/design-system/components';
import { CheckIcon } from '@/icons/informative/Check';
import type { PlanCardType } from '@/sections/Plans/types';
import { theme } from '@/theme';
import { css } from '@linaria/core';
import { PlanCardVisual } from './PlanCardVisual';
@@ -27,27 +28,46 @@ const StyledCard = styled.div`
`;
const CardHeader = styled.div`
display: grid;
grid-template-columns: 1fr;
justify-content: space-between;
overflow: hidden;
display: flex;
flex-direction: column;
overflow: visible;
@media (min-width: ${theme.breakpoints.md}px) {
grid-template-columns: 1fr auto;
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
}
`;
const CardHeaderInfo = styled.div`
display: grid;
grid-template-columns: 1fr;
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
overflow: hidden;
row-gap: ${theme.spacing(4)};
gap: ${theme.spacing(4)};
`;
const cardPlanTitleClassName = css`
&[data-size='xs'] {
line-height: ${theme.lineHeight(5)};
}
@media (min-width: ${theme.breakpoints.md}px) {
&[data-size='xs'] {
line-height: ${theme.lineHeight(6)};
}
}
`;
const priceBodyClassName = css`
color: ${theme.colors.primary.text[60]};
`;
const PriceLine = styled.div`
align-items: baseline;
display: flex;
gap: ${theme.spacing(1)};
white-space: nowrap;
`;
@@ -57,12 +77,14 @@ const CardIllustrationEmbed = styled.div`
border-radius: ${theme.radius(2)};
display: block;
flex-shrink: 0;
height: 112px;
height: 80px;
overflow: hidden;
width: 197px;
@media (min-width: ${theme.breakpoints.md}px) {
justify-self: end;
display: block;
margin-left: auto;
transform: translateX(${theme.spacing(4)});
}
`;
@@ -104,7 +126,13 @@ export function Card({ card, highlighted = false, maxBullets }: CardProps) {
<StyledCard style={{ gridRow: `span ${totalRows}` }}>
<CardHeader>
<CardHeaderInfo>
<Heading as="h3" segments={card.heading} size="md" weight="light" />
<Heading
as="h3"
className={cardPlanTitleClassName}
segments={card.heading}
size="xs"
weight="light"
/>
<PriceLine>
<Heading
as="h4"
@@ -112,7 +140,12 @@ export function Card({ card, highlighted = false, maxBullets }: CardProps) {
size="sm"
weight="regular"
/>
<Body as="span" body={card.price.body} size="sm" />
<Body
as="span"
body={card.price.body}
className={priceBodyClassName}
size="sm"
/>
</PriceLine>
</CardHeaderInfo>
<CardIllustrationEmbed>