How to adjust fontsize of pn.Card's header?

Panel
1

`

import panel as pn
css = """
.bk.card button.bk.card-header .bk.card-header-row .bk .bk.bk-clearfix {
  font-size: 200px;
}
"""
pn.extension(raw_css=[css])
pn.Card(header="test")

doesn’t seem to work.

2

Try to use the CSS element below. I Haven’t tried it to change font size but it does work for other CSS properties.

.bk.card-header, .bk.accordion-header {
  color: #ffef96;
  background-color: #50394c;
}
3

Hi @ahuang11

I tried your code with panel serve and it for me it works on the current master branch of Panel.

image
image554×1009 15.3 KB 

import panel as pn
css = """
.bk.card button.bk.card-header .bk.card-header-row .bk .bk.bk-clearfix {
  font-size: 200px;
}
"""
pn.extension(raw_css=[css])
pn.Card("Content "*10, header="test").servable()
4

@Marc @ahuang11 - How does one interpret the css directive in this line?
.bk.card button.bk.card-header .bk.card-header-row .bk .bk.bk-clearfix

I assume this is referring to some CSS definition in the card.css ?
Or do inspect source in my browser and reverse engineer the style definitions?

5

See How do I use CSS to modify Panel widgets' style like fontsize and color? - #2 by ahuang11

2 Likes