Icon List and line separator

[dodegkr]

Hi All,

I’m attempting to create this icon list but having an issue. Please see photo attached to see exactly what i’m trying to replicate (At the moment it is just an image).

I would like a headline “Popular Features” with the line separator next to it on one line. Underneath this, I would like three separate icon and titles all on the same line rather than having it one underneath another. Don’t know if it has something to do with containers or rows? Just can’t work it out.

I tried adding the below to the CSS and ‘inline-icons’ to the class but nothing happens

x-ul-icons.inline-icons li {
display: inline-block;
line-height: 1.7;
min-width: 60px;

[basanta]

Hi There,

Thanks for writing in!

To make the heading similar to the image please use a line element with -ve margin and lower z-index than the heading element.
Use background to the heading element so that it will overlap to the line element with a little padding.

For the icon text inline, instead of using custom css to make it in a row please use global block to create column . element and insert it after the heading.
For more clarification about global block read

Global Block | Themeco Docs

Hope this helps!

Thanks

[dodegkr]

Hi @basanta

Thanks for that, global blocks work well.

Regarding the line element, I don’t quite understand how to go about doing that?

[basanta]

Hi There,

Thanks for writing in!

I have created a heading with the line for you, you can unzip it and import to the template manager.
After that insert the template to the page where you want to use it.
You can adjust it a bit for your look and fell.

heading-with-line.tco.zip

Thanks