[BpkCard] Composable BpkCard by gert-janvercauteren · Pull Request #4161 · Skyscanner/backpack

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-01-28T06:35:09Z

This pull request introduces the new BpkCardV2 component to the Backpack design system, providing a modern, composable, and accessible card solution with extensive documentation, theming, and layout flexibility. The changes include the component implementation, full documentation, Storybook stories, and supporting styles.

The most important changes are:

Component Implementation and API:

Added the BpkCardV2 React component with explicit subcomponents (Header, Body, Footer, Primary, Secondary), supporting flexible layouts (including split layouts with configurable ratios), multiple surface color tokens, and visual variants (shadow or outlined). The component is fully accessible and mobile-first responsive. (packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.tsx, packages/bpk-component-card-v2/index.ts) [1] [2]

Styling and Theming:

Introduced a new SCSS module with BEM naming, Backpack design tokens, and responsive/RTL support, enabling eight surface color variants, shadow/border variants, and split layouts with semantic dividers. (packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.module.scss)

Documentation and Usage:

Added a comprehensive README with installation instructions, usage examples, prop tables, accessibility notes, browser support, and Figma references. (packages/bpk-component-card-v2/README.md)
Created a detailed changelog documenting the initial release, features, accessibility, testing, migration guide, and future enhancements. (packages/bpk-component-card-v2/CHANGELOG.md)

Storybook and Examples:

Added a new Storybook stories file demonstrating all features and variants of BpkCardV2, including basic usage, split layouts, surface color variants, outlined variant, complex product cards, and grid layouts. (examples/bpk-component-card-v2/stories.tsx)

Remember to include the following changes:

Add comprehensive specification, planning, and task documents for BpkCardV2 component implementation. Includes feature specifications, architectural planning, implementation tasks, and design token mapping. - spec.md: Feature specifications with user stories and requirements - plan.md: Implementation architecture and design decisions - tasks.md: Task breakdown with dependencies - requirements.md: Checklist of all requirements Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Define TypeScript types for BpkCardV2 component and all subcomponents. Includes surface color variants, visual variants, and prop interfaces. Types: - BpkCardV2Props: Root component props - BpkCardV2SurfaceColor: 8 surface color variants - BpkCardV2Variant: Visual variants (default, outlined) - Subcomponent prop types: Header, Body, Primary, Secondary, Footer Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Implement root BpkCardV2 component with forwardRef support, variant and surface color props, and attached subcomponents pattern. Features: - forwardRef for DOM element access - Variant support (default/outlined) - Surface color via data attribute for CSS selector support - ARIA label and labelledBy support - Attached subcomponents (Header, Body, Primary, Secondary, Footer) Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

… Footer) Implement composable subcomponents for BpkCardV2: - Header: Semantic <header> element for card title - Body: Main content area with split layout support - Primary: Primary content in split layout (configurable width) - Secondary: Secondary content in split layout - Footer: Semantic <footer> element Body component handles: - Simple single-column layout - Split layout with configurable ratio (default 70/30) - Responsive mobile-first behavior - Divider insertion between Primary/Secondary Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Implement comprehensive CSS Modules styling for BpkCardV2: - Base card styles with flexbox container and border-radius - 8 surface color variants using Backpack design tokens - Visual variants: default (shadow) and outlined (border) - Split layout responsive behavior (mobile stacked, desktop side-by-side) - Divider styling between Primary and Secondary sections - RTL support with logical properties - Mobile-first design with 768px breakpoint Uses: - Backpack mixins: radii, shadows - Backpack tokens for colors, borders, spacing - CSS custom properties for dynamic split ratios Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Implement complete test coverage for BpkCardV2 component: - BpkCardV2-test.tsx: 50+ unit tests covering props, rendering, variants - accessibility-test.tsx: Jest-axe tests for WCAG 2.1 Level AA compliance - snapshot-test.tsx: 8 snapshot tests for visual regression detection - integration-test.tsx: 40+ tests for interactive content, edge cases, nesting Coverage includes: - All prop combinations (variants, colors, split ratios) - Split layout functionality and responsive behavior - ARIA attributes and accessibility compliance - Keyboard navigation and focus management - Interactive elements and form support - Dynamic content updates and edge cases Test count: 150+ Coverage target: 80%+ Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Create 9 comprehensive Storybook stories for BpkCardV2 component: - BasicCard: Header, Body, Footer composition - SplitLayout: 70/30 responsive layout - OutlinedVariant: Border-based styling - ElevatedSurface: Elevated background color - SurfaceColorVariants: Gallery of all 8 surface colors - ComplexProductCard: Real-world product layout example - MinimalCard: Body-only usage pattern - CustomSplitRatio: Non-default split ratio (40/60) - CardGrid: Multiple cards with different variants Each story includes: - Working examples with interactive controls - Argtype definitions for props - Documentation and use case context Stories enable: - Visual testing and design review - Developer documentation - Component exploration and learning Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Create user-facing documentation: - README.md: Installation, usage examples, props documentation, browser support, accessibility notes, related components - CHANGELOG.md: Version history, features, technical details, browser support, migration information Documentation covers: - Installation and import - Basic card with sections - Split layout examples - Surface color usage - Props reference for root and subcomponents - Browser support matrix - Accessibility compliance - Related components - Figma design link Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

- Add missing type="button" attribute to button in Storybook story - Auto-format TypeScript/JavaScript files via eslint --fix - Update import ordering and spacing per linter rules Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Fix double padding issue where Body had padding AND Primary/Secondary had padding when using split layout. Now: - Single-column layout: Body has padding - Split layout: Body has no padding, only Primary/Secondary have padding This ensures proper spacing without duplication in split layouts. Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-28T06:42:25Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Copilot

Pull request overview

This PR introduces the new BpkCardV2 component to the Backpack design system, providing a modern, composable, and accessible card solution with extensive documentation, theming support, and layout flexibility.

Changes:

Added BpkCardV2 component with explicit subcomponents (Header, Body, Primary, Secondary, Footer) supporting split layouts, 8 surface color variants, and two visual styles (shadow/outlined)
Implemented comprehensive testing suite including unit tests, accessibility tests, integration tests, and snapshot tests
Created full documentation with README, CHANGELOG, Storybook stories, and specification files

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
specs/001-composable-card/*.md	Component specification, implementation plan, and task breakdown documents
packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.tsx	Root component with subcomponent composition and refs support
packages/bpk-component-card-v2/src/BpkCardV2/subcomponents/*.tsx	Header, Body, Footer, Primary, Secondary subcomponents
packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.module.scss	Responsive styles with BEM naming and design tokens
packages/bpk-component-card-v2/src/BpkCardV2/common-types.ts	TypeScript type definitions for component props
packages/bpk-component-card-v2/src/BpkCardV2/tests/*.tsx	Comprehensive test suite (unit, accessibility, integration, snapshot)
packages/bpk-component-card-v2/README.md	Component documentation with usage examples
packages/bpk-component-card-v2/CHANGELOG.md	Initial release changelog
examples/bpk-component-card-v2/stories.tsx	Storybook stories demonstrating all features

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

skyscanner-backpack-bot · 2026-01-28T07:20:33Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

- Add ForwardRefExoticComponent type definition for compound component pattern - Wrap all subcomponents (Header, Body, Primary, Secondary, Footer) with forwardRef - Create BpkCardV2Component type that properly types the attached subcomponents - Make children prop optional for subcomponents to support empty sections - Remove unsupported 'padding' prop from story example - Export BpkCardV2Component type for external use This resolves all TS2339 "Property does not exist" errors while maintaining the compound component API pattern used by BpkCardV2. Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-30T04:00:46Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Resolves all 42 failing tests by using the cssModules utility pattern established in existing Backpack components. This ensures SCSS class names are properly available in both test and production environments. Changes: - Import cssModules utility from bpk-react-utils in all component files - Replace direct SCSS bracket notation with getClassName() calls - Fixes querySelector failures when looking for elements by class name - Maintains production styling while enabling proper test selectors - Update test selector to avoid matching subcomponent classes - Fix import ordering to follow Backpack conventions Test Results: ✅ Test Suites: 334 passed, 1 skipped ✅ Tests: 1711 passed, 3 skipped, 1714 total ✅ Snapshots: 816 passed ✅ Linting: 0 errors Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-30T06:10:35Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-30T06:12:11Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 152236d

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-01-30T06:22:14Z

Copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-01-30T06:22:22Z

Gert-Jan Vercauteren (@gert-janvercauteren) I've opened a new pull request, #4191, to work on those changes. Once the pull request is ready, I'll request review from you.

…consistency (#4191) * Initial plan * fix: Change spelling from 'colour' to 'color' for US English consistency Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com>

skyscanner-backpack-bot · 2026-01-30T06:34:08Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

README documented non-existent subcomponents (Primary/Secondary), props (split/splitRatio), and padding API. Updated to use the real API: Section, Divider, templateColumns, and BpkSpacing enum values. Also added missing type re-exports (HeaderProps, BodyProps, SectionProps, FooterProps, SurfaceColor, Variant) from the package entry point. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-09T08:16:11Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-12T04:00:03Z

+ *   <button>Cancel</button>
+ *   <button>Save</button>


These should be BpkButton in the example

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-12T04:00:24Z

+ *   <span>Title</span>
+ *   <span>Action</span>


These should be BpkText in the example

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-12T04:01:00Z

+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile)


Needs a comment explaining why the auto column (for divider)

Surface color variants now use proper BEM modifiers (e.g. bpk-card-v2--surfaceDefault) instead of data attribute selectors, aligning with Backpack SCSS conventions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-12T06:07:39Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

- Use BpkButton in Footer JSDoc example instead of plain <button> - Use BpkText in Header JSDoc example instead of plain <span> - Add comment explaining the auto column for Divider in Root example - Place className/style after {...rest} spread to block runtime overrides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-12T08:33:48Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Ezreal Yang (Supremeyh) · 2026-03-13T06:47:38Z

+  }
+
+  &__card-wrapper {
+    width: 20rem;


how about use bpk tokens instead, eg tokens.bpk-spacing-base() * 20 here

Ezreal Yang (Supremeyh) · 2026-03-13T07:03:17Z

+    }
+  }
+
+  &__grid {


is it possible to use bpk layout component?

Ezreal Yang (Supremeyh) · 2026-03-13T07:08:15Z

+
+const AirlineLogo = () => (
+  <div className={getClassName('bpk-card-v2-examples__airline-logo')}>
+    <BpkText textStyle={TEXT_STYLES.caption} tagName="span">Skyland</BpkText>


the tagName is default as span in BpkText, maybe it don't need here?

Ezreal Yang (Supremeyh) · 2026-03-16T03:22:49Z

+    },
+    ref,
+  ) => (
+    <div


Root renders with
and will... rest (including onClick) is directly placed on the div. However, the component in scss sets cursor: pointer for variant="default" (implying clickable). This will cause to use a div as an interactive element (click), without automatically providing keyboard interaction/semantics, thereby breaking the accessibility specification: Keyboard users cannot activate the card with Enter/Space, nor will it be recognized as an interactive element by screen readers.

I will handle click behaviour in a separate PR. I have attempted to bundle it but the use-cases are quite complex.

Adding a click listener to the top level (Root) component will introduce A11y bugs similar to BpkCardV1 :(

IrinaWei · 2026-03-17T08:23:24Z

+  }
+
+  // Surface color variants
+  &--surfaceDefault {


All of them are camelCase style, should we use kebab-case here?

- Use bpk tokens for hardcoded rem values in examples SCSS - Replace raw CSS grid with BpkFlex layout component in examples - Remove redundant tagName="span" (BpkText default) and direction="row" (CSS default) - Replace alert() with noop in example click handlers - Extract shared resolveDirectionalPadding utility for Header/Footer - Convert camelCase SCSS modifier classes to kebab-case (BEM convention) - Delete redundant src/BpkCardV2/index.ts (package root already exports directly) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T03:31:32Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Use BpkFlexProps['padding'] type instead of string for the shared padding resolver, matching the actual BpkResponsiveValue<BpkSpacingValue> type expected by BpkFlex. Also replace alert/console.log with noop in example click handlers to satisfy no-console lint rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T04:07:19Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

IrinaWei

Code review

Found 4 issues:

bpk-surface-bg-colors mixin exists and is bypassed — BpkCardV2.module.scss manually defines 8 &--surface-* background-color modifier blocks. packages/bpk-mixins/_surfaces.scss already exports @mixin bpk-surface-bg-colors that generates the identical set (surface-default, surface-elevated, surface-hero, surface-contrast, surface-highlight, surface-subtle, surface-low-contrast, surface-tint). Writing the same rules twice means future token changes or new surface colors must be updated in two places. Replace the 8 blocks with:

@use '../../bpk-mixins/surfaces';
// inside .bpk-card-v2:
@include surfaces.bpk-surface-bg-colors;

backpack/packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.module.scss

Lines 42 to 73 in d2723f7

    
             &--surface-default { 
        
               background-color: tokens.$bpk-surface-default-day; 
        
             } 
        
             &--surface-elevated { 
        
               background-color: tokens.$bpk-surface-elevated-day; 
        
             } 
        
             &--surface-tint { 
        
               background-color: tokens.$bpk-surface-tint-day; 
        
             } 
        
             &--surface-subtle { 
        
               background-color: tokens.$bpk-surface-subtle-day; 
        
             } 
        
             &--surface-hero { 
        
               background-color: tokens.$bpk-surface-hero-day; 
        
             } 
        
             &--surface-contrast { 
        
               background-color: tokens.$bpk-surface-contrast-day; 
        
             } 
        
             &--surface-low-contrast { 
        
               background-color: tokens.$bpk-surface-low-contrast-day; 
        
             } 
        
             &--surface-highlight { 
        
               background-color: tokens.$bpk-surface-highlight-day; 
        
             } 
        
           }

Package folder structure contradicts the established V2 naming convention — BpkCardV2 lives in a standalone packages/bpk-component-card-v2/ package. Every other V2 migration in this repo puts the new version as a subdirectory of the existing package: BpkButtonV2 is at packages/bpk-component-button/src/BpkButtonV2/ and BpkModalV2 is at packages/bpk-component-modal/src/BpkModalV2/. A sibling package (bpk-component-card-v2) implies a permanent independent package rather than a transitional V2, which affects deprecation handling, changelogs, and consumer migration. The component should live at packages/bpk-component-card/src/BpkCardV2/ and be exported from packages/bpk-component-card/index.ts unless there is an intentional reason to deviate from the convention (see Supremeyh's comment above).

backpack/packages/bpk-component-card-v2/index.ts

Lines 1 to 28 in d2723f7

    
           /* 
        
            * Backpack - Skyscanner's Design System 
        
            * 
        
            * Copyright 2016 Skyscanner Ltd 
        
            * 
        
            * Licensed under the Apache License, Version 2.0 (the "License"); 
        
            * you may not use this file except in compliance with the License. 
        
            * You may obtain a copy of the License at 
        
            * 
        
            *   http://www.apache.org/licenses/LICENSE-2.0 
        
            * 
        
            * Unless required by applicable law or agreed to in writing, software 
        
            * distributed under the License is distributed on an "AS IS" BASIS, 
        
            * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
        
            * See the License for the specific language governing permissions and 
        
            * limitations under the License. 
        
            */ 
        
           export { default as BpkCardV2 } from './src/BpkCardV2/BpkCardV2'; 
        
           export type { 
        
             BpkCardV2Props, 
        
             BpkCardV2HeaderProps, 
        
             BpkCardV2BodyProps, 
        
             BpkCardV2SectionProps, 
        
             BpkCardV2FooterProps, 
        
             BpkCardV2SurfaceColor, 
        
             BpkCardV2Variant, 
        
             BpkCardV2Namespace,

🤖 Generated with Claude Code

Follow the same pattern as BpkModalV2 by colocating V2 inside the existing card package rather than maintaining a separate package. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace 8 hand-written surface modifier blocks with the shared mixin from bpk-mixins/_surfaces.scss to avoid duplication. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T06:50:23Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T07:33:14Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

The horizontal divider on mobile had margin on top/bottom but none on left/right, inconsistent with the desktop vertical divider which uses top/bottom margin. Swaps the mobile margin axes to match. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…mples Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T08:04:08Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T12:03:41Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

…ase breakpoint for direction Splits carousel and hotel info into separate BpkCardV2.Section components for correct grid column alignment. Changes footer deals layout to use desktop breakpoint instead of mobile, ensuring column layout on smaller viewports. Removes unnecessary flex property from carousel wrapper. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-18T12:49:15Z

Visit https://backpack.github.io/storybook-prs/4161 to see this build running in a browser.

Gert-Jan Vercauteren (gert-janvercauteren) and others added 10 commits January 28, 2026 11:23

[fix] Fix linting errors and formatting issues

3ac7f95

- Add missing type="button" attribute to button in Storybook story - Auto-format TypeScript/JavaScript files via eslint --fix - Update import ordering and spacing per linter rules Co-Authored-By: Claude (Opus 4.5) <noreply@anthropic.com>

Gert-Jan Vercauteren (gert-janvercauteren) self-assigned this Jan 28, 2026

Gert-Jan Vercauteren (gert-janvercauteren) added ai: claude minor Non breaking change labels Jan 28, 2026

Gert-Jan Vercauteren (gert-janvercauteren) marked this pull request as ready for review January 28, 2026 06:46

Copilot AI review requested due to automatic review settings January 28, 2026 06:46

Copilot AI reviewed Jan 28, 2026

View reviewed changes

chore: noodle with example

83b944a

Gert-Jan Vercauteren (gert-janvercauteren) added the ai-week label Jan 30, 2026

Copilot AI mentioned this pull request Jan 30, 2026

[BpkCardV2] Fix spelling - change 'colour' to 'color' for US English consistency #4191

Merged

12 tasks

Gert-Jan Vercauteren (gert-janvercauteren) commented Mar 12, 2026

View reviewed changes

Ezreal Yang (Supremeyh) reviewed Mar 16, 2026

View reviewed changes

IrinaWei reviewed Mar 17, 2026

View reviewed changes

IrinaWei reviewed Mar 18, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) and others added 2 commits March 18, 2026 14:36

Move BpkCardV2 into bpk-component-card package

16725ee

Follow the same pattern as BpkModalV2 by colocating V2 inside the existing card package rather than maintaining a separate package. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use bpk-surface-bg-colors mixin instead of manual surface color blocks

c8ce896

Replace 8 hand-written surface modifier blocks with the shared mixin from bpk-mixins/_surfaces.scss to avoid duplication. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use BpkButton and BpkText instead of raw HTML in snapshot tests

ae6e406

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Gert-Jan Vercauteren (gert-janvercauteren) commented Mar 18, 2026

View reviewed changes

Comment thread packages/bpk-component-card/src/BpkCardV2/subcomponents/Root.tsx

Gert-Jan Vercauteren (gert-janvercauteren) and others added 2 commits March 18, 2026 15:54

Remove unused flight-line and placeholder CSS classes from CardV2 exa…

e00a085

…mples Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace raw HTML divs with BpkLayout components in CardV2 examples

654452a

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

IrinaWei approved these changes Mar 19, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) merged commit 9730609 into main Mar 19, 2026
15 checks passed

Gert-Jan Vercauteren (gert-janvercauteren) deleted the 001-composable-card branch March 19, 2026 07:17

	&--surface-default {
	background-color: tokens.$bpk-surface-default-day;
	}

	&--surface-elevated {
	background-color: tokens.$bpk-surface-elevated-day;
	}

	&--surface-tint {
	background-color: tokens.$bpk-surface-tint-day;
	}

	&--surface-subtle {
	background-color: tokens.$bpk-surface-subtle-day;
	}

	&--surface-hero {
	background-color: tokens.$bpk-surface-hero-day;
	}

	&--surface-contrast {
	background-color: tokens.$bpk-surface-contrast-day;
	}

	&--surface-low-contrast {
	background-color: tokens.$bpk-surface-low-contrast-day;
	}

	&--surface-highlight {
	background-color: tokens.$bpk-surface-highlight-day;
	}
	}

	/*
	* Backpack - Skyscanner's Design System
	*
	* Copyright 2016 Skyscanner Ltd
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/

	export { default as BpkCardV2 } from './src/BpkCardV2/BpkCardV2';
	export type {
	BpkCardV2Props,
	BpkCardV2HeaderProps,
	BpkCardV2BodyProps,
	BpkCardV2SectionProps,
	BpkCardV2FooterProps,
	BpkCardV2SurfaceColor,
	BpkCardV2Variant,
	BpkCardV2Namespace,

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Jan 28, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jan 28, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) commented Jan 30, 2026

Uh oh!

Copilot AI commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Mar 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Mar 12, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Mar 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Mar 18, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Mar 18, 2026

Uh oh!

IrinaWei left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Code review

Uh oh!

skyscanner-backpack-bot Bot commented Mar 18, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Mar 18, 2026

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Mar 18, 2026

skyscanner-backpack-bot Bot commented Jan 30, 2026 •

edited

Loading

IrinaWei left a comment •

edited

Loading