The Content block contains different types of blocks:

When Page introduction is available by default, the other blocks are added.

Homepage with a slideshow in Page description, a Single column block and Property block.

Page introduction

Page introduction is usually used to add a slideshow, welcome text, etc.

<p id="pagedescription" class="block">

In some pages, Single column, Double column and Property blocks can’t be added and only that block can be used, like it’s the case in:

Single & Double column block

The two blocks are similar with the difference that a Double column block has two column content blocks instead of one.

A Single column block:

<div id="block-4" class="block e-4 even last cols-1">
	<div class="column e-1 odd single no-parag img-left no-title">
		<div class="imageblock">
			<span><img src="*.png" alt="" title=""></span>
	<div class="clear"></div>

A Double column block:

<div id="block-3" class="block e-3 odd last cols-2">
	<div class="column e-1 odd first no-img"></div>
	<div class="column e-2 even last no-parag no-title"></div>

Each of these blocks has an ID block-[order number], a class block and cols-1 or cols-2 if the block has 1 or 2 columns.

Image block & Paragraph

column may contain an image, inside a imageblock block. Uploaded via Kigo, its position in relation to the paragraph of text can be set (as well as the meta data and link):

Interface to upload an image and choose its position.

Classes in column indicate if there is an image and/or paragraph of text and its position:

Display & position Column classes
Image left to the text parag-right
Image right to the text parag-left
Image left above the text img-above
Image centered above the text img-above
Image right above the text img-above
Image to the left, no paragraph no-parag
Image centered, no paragraph no-parag
Image to the right, no paragraph no-parag
No image no-img
No image, no paragraph no-parag

Property block

Property blocks with the class property contains information about the property in search pages or in a basic page:

Property page blocks

Property page blocks

This block added in Kigo contains information about the property:

Blocks added to the property page.

These blocks are then visible online:

Blocks with a description of the property, the area and a map.

A property page block has a title and a paragraph of text:

<div id="block-2" class="block cols-1 e-2 even middle">
	<div class="column e-1 odd single parag-only descriptionprop_info-description">
		<p class="paragraph"></p>

Each type of block has a class:

Class Meaning
features_list List of attributes
description-prop_info-description Description of the property
description-prop_info-areadescription Description of the area
description-udpa-[number] Content from a UDPA
description-text A custom block
description-prop_info-amenities Amenities
description-prop_info-activities Activities

A empty_text class is added if there is no content.

Features list

Features such the number of bedrooms, max guests, etc. are generally organized into lists:

A features lists. “Metro line”, a UDPA, was in CSS.

The features block is in a information block:

<div class="column e-1 odd single features_list">
	<div class="information">
		<div class="features attributes e-1 odd single empty_name">

It has the class attributes and:

The list itself is in a <dl>:

	<dt class="attribute-prop_info-class e-1 odd 
	first"><span>Property type</span></dt>
	<dd class="attribute-prop_info-class e-1 odd first"><span>House</span></dd>

The <dt> and <dd> have the classes:

Amenities and Activities

Amenities and Activities are organized in <ul> lists:

<ul class="list">
	<li class="description-prop_info-amenities-6 e-1 odd first">
		<span>Parking - private</span>
	<li class="description-prop_info-amenities-11 e-2 even middle">
		<span>Washing machine</span>
	<li class="description-prop_info-amenities-12 e-3 odd middle">
Lists of amenities and activities.

The <li> (list items) have the class:

Order classes

The elements:

Have classes indicating their order absolute or relative to others:

For example, if we take a look at the source code of the first <li> element of a search option, it has the classes e-1, odd and first:

<li id="search_category_407-1" class="e-1 odd first">
	<a href="#" optid="2215" title="Studio">Studio <span>(1)</span></a>

e-[order number]

It indicates the order in a list of blocks:

It can be useful to target a specific element. In the following example the <li> e-2 and e-3 classes of the search option have a red background:

odd | even

Alternatively, elements in a list have odd or even classes.

Useful to alternate colors. For example if we style the Search menu, we can decide in CSS that:

first | middle | last

It indicates the position of the element relative to the others. For example we styled the first element in grey:


Finally, when there is only one element in a list the class single is added.