Skip to content

Make card_header() display flex (equivalent to .hstack) by default #1253

@gadenbuie

Description

@gadenbuie

Inspired by #1250 (comment), can we make .card_header have .hstack properties by default, with something like this:

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  gap: calc(var(--bslib-spacer, 1rem) / 2);
}

We'd also give card_header() a .bslib-gap-spacing by default. The goal is to enable toolbar-style card headers -- which is likely what most people want -- by default, e.g.

card(
  card_header(
    icon("gear"),
    p("Histogram of waiting times"),
    actionButton("go", "Go", class = "ms-auto btn-sm border-0")
  ),
  plotOutput(outputId = "distPlot"),
  card_footer(class = "text-muted", lorem::ipsum(2))
)
Image

Note that we wouldn't do the same for card_footer() because it's more likely that these elements would take footnotes or prose.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions