CSS header with stacked text and different font sizes - html

Question

I'm trying to create the following header using CSS:
This is my attempt so far using CSS grid:
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron">
<div class="grid">
<div class="a">
28
</div>
<div class="b">
clubs
</div>
<div class="c">
/
</div>
<div class="d">
48
</div>
<div class="e">
virtual
</div>
<div class="f">
gyms
</div>
</div>
CSS:
.jumbotron {
background: linear-gradient(141deg, rgb(0,223,179), rgb(34,198,252));
}
.grid {
display:grid;
grid-template-columns: 50px 50px 50px 50px;
color:white;
}
.a{
grid-column: 1;
grid-row: 1/span 2;
font-size:35px;
}
.b{
grid-column: 2;
grid-row: 2;
}
.c{
grid-column: 3;
grid-row: 1/span 2;
font-size:35px;
}
.d {
grid-column: 4;
grid-row:1/span 2;
font-size:35px;
}
.e {
grid-column:5;
grid-row:1;
}
.f {
grid-column:5;
grid-row:2;
}
https://codepen.io/anon/pen/jGKwEL
I don't know if I'm overthinking it but this is the best solution I can come up with to make the stacked text somewhat align. It's very tedicous however to make look exactly like the picture and it includes a lot of CSS classes. Any other way to approach this or am I on the right track?
Edit: this what I ended up doing with help of the answers to this question: https://codepen.io/anon/pen/jGKwEL

Answer 1

You don't have to use CSS grid: just because it is available does not mean that you have to use it, or that it is relevant for your usecase. In your layout requirement, it is more suitable to use a mix of display: flex and some simple relative positioning to get the baseline of the text to line up.
First, with the markup, you can simply use a <ul>:
<ul>
<li>
<span class="count">28</span>
<span class="text">clubs</span>
</li>
<li>
<span class="count">48</span>
<span class="text">virtual<br />gyms</span>
</li>
</ul>
With regards to styling:
use display: flex on the <ul> parent so that the child elements will be arranged horizontally
the slanted border can simply be emulated using border-right, and we disable it on the last child using the li:last-child selector
the baseline alignment of the text/description next to the number requires manual adjustment, just play around with some values with bottom offset
use transform: skew(...) to slant your text uniformly, instead of relying on italics. This will lead to uniform slanting of the text and the separators :)
The outcome will look something like this:
Here is a quick proof-of-concept I have whipped up, based on the suggested changes listed above:
.jumbotron {
background: linear-gradient(141deg, rgb(0, 223, 179), rgb(34, 198, 252));
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end; /* Align to right */
}
ul li {
transform: skew(-10deg);
border-right: 3px solid #fff;
padding: 0 20px;
display: flex;
align-items: flex-end; /* Align to bottom */
}
ul li:last-child {
border: none;
}
ul li span {
color: white;
line-height: 1em;
font-weight: bold;
}
ul li span.count {
font-size: 45px;
margin-right: 10px;
}
ul li span.text {
text-transform: uppercase;
position: relative;
bottom: .35em; /* Adjust this value manually */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron">
<ul>
<li>
<span class="count">28</span>
<span class="text">clubs</span>
</li>
<li>
<span class="count">48</span>
<span class="text">virtual<br />gyms</span>
</li>
<li>
<span class="count">33</span>
<span class="text">active<br />players</span>
</li>
<li>
<span class="count">15</span>
<span class="text">inactive<br />players</span>
</li>
</ul>
</div>

Answer 2

Here's an example using a list, :after for styling the slashes, and spans for the different parts of one item. You can just duplicate the <li>'s to add more items, without the need for futher classes. I hope it's the way you need it :)
You could use flexbox as an alternative, but I personally think there is no need for it in this case.
https://codepen.io/anon/pen/YrvQMp