How to mark up a list with thumb to left of text

I am trying to figure out how, in Webflow, to recreate a REALLY common UI pattern: a list of articles, for example, that has a featured thumbnail to the left of a block of text, such as a headline and teaser. It can be done using display table and table cell in Textmate, for example, but Webflow doesn’t have that as a display option.

Each block of thumb and text needs to stack on top of the next one, and if using floats, a way to clear floats within the Webflow UI.

I’ve tried columns nested in columns, that doesn’t work. When I try to float the text block, the headings do not wrap and stay inside their wrapper.

Please help!!!

Did you try Tabs ? Tablinks can be vertical and you can add there inside different elements.

I’m not sure I know what tablinks are, but we don’t want a tabbed interface, but a vertically scrolling list of thumbnail to left, article title/teaser to right, with a border under each item, such as you would see in a blog with listing of posts by category.

ok… maybe you could show some example? Cuz I am not sure I clear understand what exactly you need :pensive:

I agree with sabanna, an example of what yo are trying to achieve would be very usefull

See 5 Simple and Practical CSS List Styles You Can Copy and Paste | Design Shack very first image, to right of first paragraph.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.