This page contains all ad styling for the SERP. Please note that on-off classes used in the demos below should generally not be used in a final implementation, they are used in this demo since the demo is responsive and not adaptive. Your application should handle rendering using the available mixins.
Please note that the application is responsible for rendering appropriate content instead of an image, to indicate the lack of an image.
each val in [1, 2]
+item()
+item-thumb('#', false).no-frame
+icon('lg', 'image').off-xs-inline
+sprite('web', 'image')
+item-content()
+item-title('#').h4.t-bold
| Normal title, fairly short
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-date('#').off-lg
| 20 Mar 6:34 pm
This removes the frame and the image element, but keeps the element that shifts content to the right.
each val in [1, 2]
+item()
+item-thumb('#', false).no-bg.no-frame
+item-content()
+item-title('#').h4.t-bold
| Normal title, fairly short
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
The entire thumbnail area will be hidden in this case, making text span the entire width of the container
each val in [1, 2]
+item('top').is-favorite
+item-thumb('#', false).no-image
+item-content()
+item-title('#').h4.t-bold
| Normal title, fairly short
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
span Top ad
each val in [1, 2]
+item().is-favorite
+item-thumb('#', false)
+serp-images()
+item-content()
+item-title('#').h4.t-bold
| Really nice house with a balcony
+item-meta()
b 5
| bathrooms
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-date().off-lg
| 20 Mar 6:34 pm
each val in [1, 2]
+item()
+item-thumb('#', true)
+serp-images()
+item-content()
+item-title('#').h4.t-bold
| Multi-family house, for 2-3 families
+item-meta()
b 3
| kitchens
+item-location()
+member-badge()
| MEMBER
| Level 2 location, Level 1 location
+item-info()
strong USD 55,995
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-date().off-lg
| 20 Mar 6:34 pm
each val in [1, 2]
+item()
+item-thumb('#', false).no-bg.no-frame
+serp-images-job()
+item-content()
+item-title('#').h4.t-bold
| Nice job ad title
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-date().off-lg
| 20 Mar 6:34 pm
each val in [1, 2]
+item('top')
+item-thumb('#', true)
+serp-images('top')
+item-content()
+item-title('#').h4.t-bold
| Volvo V40 2002 low mileage
+item-meta
b 92000
| km
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 59,50,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
span TOP AD
each val in [1, 2]
+item('top')
+item-thumb('#', false).no-bg.no-frame
+serp-images-job('top')
+item-content()
+item-title('#').h4.t-bold
| Nice job ad title
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 60,00,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
span TOP AD
The bump up icon has been replaced by a placeholder since the web-ui project does not contain web assets.
each val in [1, 2]
+item('bump').is-favorite
+item-thumb('#', true)
+serp-images()
+item-content()
+item-title('#').h4.t-bold
| Volvo V40 2002 low mileage
+item-meta()
b 92000
| km
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 59,50,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
each val in [1, 2]
+item()
+item-thumb('#')
+serp-images()
+item-content()
+item-title('#').h4.t-bold
| Volvo V40 2002 low mileage
+item-location()
| Level 2 location, Level 1 location
+item-info()
strong Rs. 59,50,000
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
span TOP AD
each val in [1, 2]
+item()
+item-thumb('#')
+serp-images()
+item-content()
+item-title('#').h4.t-bold
| Luxury apartment in central location
if val == 2
+item-meta()
b 3
| Bedrooms
b 2
| Bathrooms
+item-location()
+member-badge()
| MEMBER
| Level 2 location, Level 1 location
+item-info()
strong Rs. 245,000,000 / month
+item-image-label()
img(src='http://dummyimage.com/77x18/cccccc/000000.png&text=IMAGE+LABEL', width=77, height=18).image
+item-extras()
+item-favorite('#').off-xs.off-sm
+icon('lg', 'favorite')
span Favorite
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
+item-promotion('#')
img(src='http://placehold.it/18x18', width=18, height=18)
span TOP AD