Card header improvements

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

• multiple headers in a single card acting as full-width separators.
• condensed mode.

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

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.

[peterszerzo]

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

[peterszerzo]

I would use this as a starting point:

<Card stackHorizontal>
  <CardSection title="Title one" dropTarget />
  <CardSection title="Title two" actions={[]} disabled />
</Card>