[IRN-6176][BpkCardList] use negative margin to remove bottom padding

[chiefkes]

The designs for the expandable pricing option use BpkCardList. But this component has top and bottom padding on the carousel component within it (see screenshot), making it impossible to match the designs.

After speaking with Backpack it was agreed that it doesn't make sense for the Carousel component to come with built-in top and bottom padding

To remove this padding while also ensuring that any potential box-shadows on card components within the carousel aren't clipped, this PR introduces a consistent top and bottom padding and negative margin value.

What has changed

1. 0.25 rem of spacing has been removed from the top of the BpkCardListCarousel. This means that, in combination with this PR, it will be possible for consumers to use the row and rail layouts without any top padding (when no title, chip group or cta button props are provided). The spacing change has been achieved using a consistent positive padding and negative margin value (1rem) to prevent any box shadows being cut off

2. 1 rem of spacing has been removed from the bottom of BpkCardListCarousel, while 1 rem of spacing has been added to the top of the accessory. This will mean that there is NO visual change when the accessory is rendered. However, when the accessory isn't rendered there will no longer be any bottom padding baked into the component. Once again the spacing change has been achieved using a consistent positive padding and negative margin value (1rem) to prevent any box shadows being cut off

With accessory

Before	After - 0.25 rem spacing lost above carousel

Without accessory

Before	After - 0.25 rem spacing lost above carousel and 1 rem spacing lost below carousel

Migration for breaking change

• For those consumers using BpkCardList in a RAIL or ROW layout without an accessory being rendered, consider adding 1rem of spacing below the Card List component to restore the 1rem of spacing that has been removed

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Copilot]

Pull Request Overview

This PR removes the built-in top and bottom padding from the BpkCardList carousel component to better align with design requirements. The change uses negative margins combined with padding to maintain space for potential box-shadows while eliminating the visual padding that prevented matching design specifications.

• Replaces existing padding-top and padding-bottom with negative margin-block and padding-block properties
• Adds spacing above accessory elements to maintain layout consistency
• Implements responsive behavior for mobile breakpoints

Reviewed Changes

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

File	Description
BpkCardListCarousel.module.scss	Replaces padding with negative margin approach to remove visual padding while preserving shadow space
BpkCardListRowRailContainer.module.scss	Adds top margin to accessory elements and imports tokens for spacing values

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

[nitpick] The mobile breakpoint uses a different spacing value (bpk-spacing-base vs bpk-spacing-lg) but applies the same negative margin technique. This duplication could be reduced by using CSS custom properties or a mixin to avoid repeating the pattern.

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[kerrie-wu]

LGTM

[skyscanner-backpack-bot]

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

[kerrie-wu]

Approve and wait for major release merge

[skyscanner-backpack-bot]

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