Streaming live at 10am (PST)

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


#1

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


#2

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


#3

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.


#4

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


#5

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


#6

See http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ very first image, to right of first paragraph.


#7

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