Serp

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.

No image

Please note that the application is responsible for rendering appropriate content instead of an image, to indicate the lack of an image.

Toggle source (Jade)
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

No frame

This removes the frame and the image element, but keeps the element that shifts content to the right.

Toggle source (Jade)
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)

No frame and no image

The entire thumbnail area will be hidden in this case, making text span the entire width of the container

Toggle source (Jade)
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

Single image, is-favorite

Toggle source (Jade)
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

Multiple images

Toggle source (Jade)
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

Normal, Job Ad

Toggle source (Jade)
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

Top Ad

Toggle source (Jade)
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

Top Ad, Job Ad

Toggle source (Jade)
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

Bump up

The bump up icon has been replaced by a placeholder since the web-ui project does not contain web assets.

Toggle source (Jade)
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)

All products

Toggle source (Jade)
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

With image label

Toggle source (Jade)
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