Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Card header improvements

See original GitHub issue

The following design needs are popping up for the Card component:

  • multiple headers in a single card acting as full-width separators.
  • condensed mode.
screen shot 2018-08-14 at 11 34 17 am

Currently, the following <Card><CardHeader/><SomethingElse/><CardHeader/></Card> markup turns out something like this:

screen shot 2018-08-14 at 11 33 53 am

API/implementation ideas

The condensed mode can simply mimic the Button api:

<Card condensed />

For intermediate CardHeader elements, it is safe to apply top margins differently when the &:first-child selector matches as opposed to when it doesn’t. In the former case, negative margin should be applied to counter the padding (as it is implemented currently), and in the latter case, positive margin should apply to add some space between the sections that the intermediate headers delienate.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

peterszerzocommented, Aug 14, 2018

@micha-f yes, that’s what the stackHorizontal prop on the card is supposed to accomplish.

peterszerzocommented, Aug 14, 2018

I would use this as a starting point:

<Card stackHorizontal>
  <CardSection title="Title one" dropTarget />
  <CardSection title="Title two" actions={[]} disabled />
Read more comments on GitHub >

github_iconTop Results From Across the Web

how to design card header dynamically to the width of card a
Hi,I was developing a login component with card component. I have reduced the width of my card component. But I can not make...
Read more >
Measure metric card title improvements (May 13, 2019)
Highlights Based on customer feedback, the Measure metric card title is now bold. Coming Soon! Expected release – 2 weeks Users will...
Read more >
.card-primary, .card-header, and .card-inverse don't work well ...
The docs say: Background variants Cards include their own variant classes for quickly changing the background-color and border-color of a ...
Read more >
Extended Bootstrap Cards by Keenthemes
Flush Borders. Use .card-flush class to remove a card header and footer borders: ... Add .card-px-0 to reset a card header, body and...
Read more >
Playing with Cards in Bootstrap 4 - Simple Talk
Once again, Dino Esposito explains a Bootstrap 4 enhancement. This time, he explains how the card component replaces the well and panel ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found