Make Source headings inline?

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.


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 ! :)