⚛︎ 📏
additionalClassNames
🚮
*
* OK, not entirely.
Why?
Simple use cases, like laying out a divider, either require extra markup or custom CSS
How?
Expose an expressive style API via props
[storybook demo]
(inspired by
.bgui-c-divider {
margin: 0 var(--spacing-medium);
}
@media (min-width: 768px) {
.confirmation-car-card {
display: flex;
}
.bgui-c-divider {
margin: 0;
}
.confirmation-car-card__location .bgui-c-divider {
display: none;
}
.confirmation-car-card__pricing {
border-left: 1px solid rgb(var(--bui_color_greyscale_lighter));
}
}
<Card additionalClassNames="confirmation-car-card">
<div className="bgui-u-3/4">
<div className="confirmation-car-card__details">
<Box>Vehicle details</Box>
<Divider />
</div>
<div className="confirmation-car-card__location">
<Box>Supplier and flight locations</Box>
<Divider />
</div>
</div>
<div className="confirmation-car-card__pricing">
<Box>Pricing and booking actions</Box>
</div>
</Card>
@media (min-width: 768px) {
.confirmation-car-card {
display: flex;
}
}
<Card additionalClassNames="confirmation-car-card">
<div className="bgui-u-3/4">
<Box>Vehicle details</Box>
<Divider mh={[3, 0]} />
<Box>Supplier and flight locations</Box>
</div>
<Divider mh={[3, 0]} show={[true, false]} />
<Card
bt="none"
bb="none"
br="none"
bl={["none", "none", "greyscale_lighter"]}
pa={3}
>
Pricing and booking actions
</Card>
</Card>
Tell us!
What problems would this solve for your team?
👍
👎
Any concerns?