cards with smaller padding

[marektonik]

hey, we have quite a lot of areas in Segment where Card component — but with smaller padding (similar to Visual Picker) — would be perfect to have. This big padding in current Card component is constraining us, especially when we want to use it for smaller things (take a look at the screenshots below).

Did you consider this idea in the past, if now could you consider it now? thanks!

[TheSisb]

Hi @marektonik,

The Card component accepts a padding prop. This should allow you to adjust the padding for your needs.

[marektonik]

@TheSisb @serifluous great, thank you!

[marektonik]

@serifluous is it also ok to change color variable for Card border/background?

[serifluous]

Unfortunately not. If you need a different border/background, you can go the more custom route with the Box primitive: https://paste.twilio.design/primitives/box. In Figma, this would translate to using a rectangle or frame, and applying any border color and background color tokens to it.

What's the use case, though? In most cases, Card should work just fine.

[marektonik]

@serifluous we were thinking about 'disabled' or 'error' style for a card.

[SiTaggart]

Hi there

You can't disable text based content, only interactive controls. Text must also remain with a 4.5:1 color contrast to it's background.

Thanks