Is there a way to make heading inline? By inline, I mean have two headings on the same row?
I know I can use a grid, but it’s overkill.
When my heading needs are beyond the basics I tend to just reach for Header Pro.
You could do it though with either some custom css or by using a single grid plus item that is set to have its content display as a row (and for content to display inline).
I was gonna reach for Header Pro, but wondered if there was a setting somewhere. Prefer not to use a grid stack, as it’s a bit OTT.
If you know/have the custom css handy, I’d appreciate it, otherwise I’ll crack on with HP.
Cheers.
FWIW… There is a really handy Utlility stack in UIkit, that has an inline setting. Anything dropped into it that can be inlined, is. It’s a neat little stack and can save using something like a grid to do a simple task.
If I was doing it then I’d probably use the new Coder stack and add the following html:
<h1>Main header: </h1><h2>Subtitle</h2>
I’d set the Coder stack to have a wrapper div and then add a class - e.g. inliner
Then the custom css would be:
.inliner h1, .inliner h2{
display: inline
}
There are various utility classes also available that could be used for alignment.
But again, probably easiest just going with HPro.
Yes, I guess that is the easiest way, but the Coder makes lean and elegant code…
HeaderPro does not add any unused code - there is just a <span> in one header tag for the small segment.
Brilliant ! :)