Cards & blocks

Cards and blocks are the core components of the Manitou web framework, allowing to build different views for different purposes and meanings. Each type of information, product or content could fit in its proper, resusable and flexible card or block component.

You can find the below components in _card.scss.




Horizontal rule

Horizontal rules are used to separate some blocks or some content within cards or blocks.


<hr>



Table

3 or 2 columns tables are used to display detailled data of equipments or attachments. Their basic and clear layout conveys great legibility.

Lifting height 13.8 m 45'3"
Lifting capacity 4000 kg 8800 lb
Drawbar pull 8600 dan 19333 lbf
Moving speed 32 kmh 19.8 mph

Driving type Seated
Standard tyres Pneumatic
Number of wheels 4
Number of wheels (front) 2
Number of wheels (rear) 2
Tyre dimensions (front) 400/70-20 14 PR
Tyre dimensions (rear) 400/70-20 14 PR
Driving position noise levels 79.7 dB
<table class="table table-striped">
	<tbody>
		<tr>
			<td><span>Lifting height</span></td>
			<td class="text-right">13.8 m</td>
			<td class="text-right">45'3" </td>
		</tr>
		<tr>
			<td><span>Lifting capacity</span></td>
			<td class="text-right">4000 kg</td>
			<td class="text-right">8800 lb</td>
		</tr>
		<tr>
			<td><span>Drawbar pull</span></td>
			<td class="text-right">8600 dan</td>
			<td class="text-right">19333 lbf</td>
		</tr>
		<tr>
			<td><span>Moving speed</span></td>
			<td class="text-right">32 kmh</td>
			<td class="text-right">19.8 mph</td>
		</tr>
	</tbody>
</table>

<table class="table table-striped">
      <tbody>
      <tr>
        <td>Driving type</td>
        <td class="text-right" colspan="2">Seated</td>
      </tr>
      <tr>
        <td>Standard tyres</td>
        <td class="text-right" colspan="2">Pneumatic</td>
      </tr>
      <tr>
        <td>Number of wheels</td>
        <td class="text-right" colspan="2">4</td>
      </tr>
      <tr>
        <td>Number of wheels (front)</td>
        <td class="text-right" colspan="2">2</td>
      </tr>
      <tr>
        <td>Number of wheels (rear)</td>
        <td class="text-right" colspan="2">2</td>
      </tr>
      <tr>
        <td>Tyre dimensions (front)</td>
        <td class="text-right" colspan="2">400/70-20 14 PR</td>
      </tr>
      <tr>
        <td>Tyre dimensions (rear)</td>
        <td class="text-right" colspan="2">400/70-20 14 PR</td>
      </tr>
      <tr>
        <td>Driving position noise levels</td>
        <td class="text-right" colspan="2">79.7&nbsp;dB</td>
      </tr>
    </tbody>
</table>



Product teaser

These blocks are used to display products in a short way, for views such as results views.

They can display, fo each product, the following informations : picture overview, name, data description and a text description. For concision reason, it is recommended to not display data description and text description together.

The product teaser block is wrapped in an a tag to bind it to its proper view.

<a href="#">
	<article class="product-teaser">
	    <div class="row">
	        <div class="col-picture">
	            <img src="http://farm9.staticflickr.com/8494/8265694339_342e6106fe_z.jpg" alt="TODO">
	        </div>
	        <div class="col-description">
	            <h2>MLT 625 75 H</h2>
	            <div class="row">
	                <div class="col-description-1">
                        <strong>Length</strong><strong> : </strong>3.9 m<br>
                        <strong>Width</strong><strong> : </strong>1.82 m<br>
                        <strong>Height</strong><strong> : </strong>2.17 m<br>
                        <strong>Weight</strong><strong> : </strong>4932 kg<br>
	                </div>
	                <div class="col-description-2">
                        <strong>Engine</strong><strong> : </strong>Kubota<br>
                        <strong>Power</strong><strong> : </strong>75 cv<br>
                        <strong>Lifting capacity</strong><strong> : </strong>2500 kg<br>
                        <strong>Lifting height</strong><strong> : </strong>5.9 m<br>
	                </div>
	                <div class="col-xs-12">
                    </div>
	            </div>
	        </div>
	        <div class="col-arrow">
	            <i class="fa fa-angle-right"></i>
	        </div>
	    </div>
	</article>
</a>

<a href="#" title="Side Shift Carriage">
    <article class="product-teaser">
        <div class="row">
            <div class="col-picture">
                <img src="http://farm9.staticflickr.com/8640/16731715015_5b9b521732_z.jpg" alt="TODO">
            </div>
            <div class="col-description">
                <h2>Side Shift Carriage</h2>
                <div class="row">
                    <div class="col-description-1">
                    </div>
                    <div class="col-description-2">
                    </div>
                    <div class="col-xs-12">
                        <div>More flexibility thanks to a 100 mm sideshift (both sides) - Maximum usability and increased productivity - This solution can be fitted with PFB carriage or included in TFF carriage</div>
                    </div>
                </div>

            </div>
            <div class="col-arrow">
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
    </article>
</a>



Filter block

Filter blocks are used in results views to display the number of results and eventually offer a filter on these results.

50 Result(s)


14 Result(s)


<div class="filter">
    <div class="row">
        <div class="col-md-4">
            <h3>
                <span>50</span>
                <span>Result(s)</span>
            </h3>
        </div>
        <div class="col-md-8">
            <select name="filter" id="filter" class="form-control">
	            <option style="display:none" value="">Filter by</option>
	            <option value="0" label="Lifting capacity">Lifting capacity</option>
	            <option value="1" label="Lifting height">Lifting height</option>
	            <option value="2" label="Power">Power</option>
	            <option value="3" label="Engine">Engine</option>
	            <option value="4" label="Width">Width</option>
	            <option value="5" label="Height">Height</option>
	            <option value="6" label="Length">Length</option>
	            <option value="7" label="Weight">Weight</option>
            </select>
        </div>
    </div>
</div>

<div class="filter">
    <div class="row">
        <div class="col-md-4">
            <h3>
                <span>14</span>
                <span>Result(s)</span>
            </h3>
        </div>
    </div>
</div>

<div class="filter">
    <form role="form">
        <div class="col-label">
            <label for="country">Filter by:</label>
        </div>
        <div class="col-select">
            <label class="sr-only" for="language">Language</label>
            <select name="language" id="language" class="form-control">
	            <option style="display:none" value="">Select a language</option>
	            <option value="en" label="English">English</option>
	            <option value="fr" label="Français">Français</option>
	            <option value="es" label="Español">Español</option>
	            <option value="de" label="Deutsch">Deutsch</option>
	            <option value="it" label="Italiano">Italiano</option>
	            <option value="pt" label="Português">Português</option>
	            <option value="nl" label="Nederlands">Nederlands</option>
	            <option value="pl" label="Polski">Polski</option>
	            <option value="ru" label="Pусский">Pусский</option>
	            <option value="zh" label="中文">中文</option>
            </select>
        </div>
    </form>
</div>



Home news

This component consists of a row of 4 cards that includes a picture and a title.

These cards are actually bigger than the ones we can see below since they must be displayed in a full-width container, usually in the homepage.

This row of 4 cards becomes 2 rows of 2 cards on tablet display. On mobile, the 4 cards are stacked.

If your link is an external one, don't forget to add the target="_blank" attribute on the a tag.

<section class="home-news">
    <div class="container">
        <div class="row">
        	<article>
	            <a href="#" target="_blank" >
	                <img alt="" src="http://manitou.cdn.prismic.io/manitou/a40600ba5191854e62f0c3281c3f8d8f6b1ba46a_bloc-web-reduce.jpg">
	                <p>We are committed to &amp; keep you informed about our products' fuel efficiency. Discover Reduce!</p>
	            </a>
	        </article>
	        <article>
	            <a href="#">
	                <img alt="" class="img-responsive" src="http://manitou.cdn.prismic.io/manitou/266f24190bdb43d20ed31f228942d630cafa6f9e_bloc-web-mi.jpg">
	                <p>Discover the MI industrial forklift range from 1.5 to 10&nbsp;t.!</p>
	            </a>
	        </article>
	        <article>
	            <a href="#" target="_blank">
	                <img alt="" src="http://manitou.cdn.prismic.io/manitou/88a2a4d8a3a92e618d0e9c9d73e7571f5a6daa23_bloc-web-you-tube.jpg">
	                <p>Subscribe to Manitou's YouTube channel and be notified of the latest videos.</p>
	            </a>
	        </article>
	        <article>
                <a href="#">
                    <img alt="" class="img-responsive" src="http://manitou.cdn.prismic.io/manitou/ea0012a6cb16e86c30c441b4dd517896ae647e81_8411618856_b47dfef2b8_z.jpg">
                    <p>Discover our handling solutions for livestock farmers.</p>
                </a>
	        </article>
        </div>
    </div>
</section>



Feature card

Feature cards are used to quickly display related content such as attachments, benefits or services related to an equipment.

<div class="card-feature-container">
    <a href="#" class="card-feature">
        <img class="card-img-top" alt="" src="http://farm8.staticflickr.com/7462/15608351184_fc84dda888_z.jpg">
        <div class="card-block">
            <p>Aerial Jib 1</p>
        </div>
    </a>
</div>



Basic block

There is 2 basic blocks in the Manitou web framework.

The first one, as shown below, are block with a title and different stacked parts, usually integrated in an <aside>.

Use a <br> to separate different parts of the block.

Filter by:


m

Figure too small

m

Figure too large



Newsletter

Stay up to date with the latest Manitou news and products, straight to your inbox.

Subscribe to Newsletter
<div class="card card-default">
    <div class="card-header">
        <h2 class="card-title">Filter by:</h2>
    </div>
    <div class="card-block">

		...

		<hr>

		...

		<hr>

		...

		<hr>

		...

	</div>
</div>

<div class="card">
	<div class="card-header">
		<h2>Newsletter</h2>
	</div>
	<div class="card-block">
		<p>Stay up to date with the latest Manitou news and products, straight to your inbox.</p>

		<a target="_blank" class="btn btn-primary" title="Subscribe to Newsletter" href="#">
			<i class="fa fa-envelope"></i>
			<span>Subscribe to Newsletter</span>
		</a>
	</div>
</div>

The second kind of basic blocks are simple frame illustrating the unity of a component.

Example of a .bloc.

Benefits

  • Manitou will manage all the procedures to make your process easier. You no longer need to submit applications to banks and insurance companies. Our experts guarantee a clear tailored solution without hidden costs.
  • You refer to a single contact: your dealer. No need for repeated visits to an insurance company, dealership or the bank.
  • The best of technology through the regular renewal of your equipment and for an accurate budget with no surprises.
<div class="bloc">
	...
</div>



Service block

Based on a .bloc, service blocks display an illustration of a service and one or two call-to-action.

<div class="bloc">
	<div class="container-fluid">
		<img alt="" class="img-responsive" src="http://manitou.cdn.prismic.io/manitou/da23f9d2bb501d2d0a056860b5bf3a0979c58d06_capture-decran-2014-07-22-a-16.02.38.png">
		<br>
		<div class="row">
			<div class="col-btn col-btn-margin">
				<div class="btn-group btn-block dropdown">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fa fa-caret-down pull-right"></i>
						<i class="fa fa-download"></i>
						<span>Brochures</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li role="presentation" class="dropdown-header">English</li>
						<li class="dropdown-item">
							<a href="#">
								<i class="fa fa-eye"></i>
								<span>Preview</span>
							</a>
						</li>
						<li class="dropdown-item">
							<a href="http://www.scribd.com/document_downloads/138455093?extension=pdf&amp;from=embed&amp;source=embed">
								<i class="fa fa-download"></i>
								<span>Download</span>
							</a>
						</li>
						<li role="presentation" class="dropdown-divider"></li>
						<li role="presentation" class="dropdown-header">French</li>
						<li class="dropdown-item">
							<a href="#">
								<i class="fa fa-eye"></i>
								<span>Preview</span>
							</a>
						</li>
						<li class="dropdown-item">
							<a href="http://www.scribd.com/document_downloads/138455091?extension=pdf&amp;from=embed&amp;source=embed">
								<i class="fa fa-download"></i>
								<span>Download</span>
							</a>
						</li>
						<li role="presentation" class="dropdown-divider"></li>
					</ul>
				</div>
			</div>
			<div class="col-btn">
				<a href="#" class="btn btn-primary" title="Get in touch with a dealer, one of our subsidiaries or even our head office.">
					<i class="fa fa-envelope"></i>
					<span>Contact</span>
				</a>
			</div>
		</div>
	</div>
</div>

<div class="bloc">
	<div class="container-fluid">
		<img alt="" class="img-responsive" src="http://manitou.cdn.prismic.io/manitou/03e5a7c271c2b2d59a94a35488af557a64e785c9_15495644292_e803aeda94_k.jpg">
		<br>
		<div class="row">
			<div class="col-btn col-btn-margin">
			</div>
			<div class="col-btn">
				<a href="#" class="btn btn-primary" title="Get in touch with a dealer, one of our subsidiaries or even our head office.">
					<i class="fa fa-envelope"></i>
					<span>Contact</span>
				</a>
			</div>
		</div>
	</div>
</div>



Category block

Based on a .bloc, category blocks display a media introducing a category, a carousel (see section Interactive components) or a video (see section Illustrations), and eventually a call-to-action.

<div class="bloc">
    <div class="container-fluid">
    	<div id="carousel-category-block" class="carousel slide" data-ride="carousel">
    		<div class="carousel-inner" role="listbox">
    			<div class="carousel-item active">
    				<img src="http://farm9.staticflickr.com/8262/8704568062_5f5514277f_z.jpg" alt="First slide">
    			</div>
    			<div class="carousel-item">
    				<img src="http://farm9.staticflickr.com/8332/8410333443_3ccba80ea0_z.jpg" alt="Second slide">
    			</div>
    			<div class="carousel-item">
    				<img src="http://farm9.staticflickr.com/8402/8703533405_23403dece8_z.jpg" alt="Third slide">
    			</div>
    		</div>
    		<a class="left carousel-control" href="#carousel-category-block" role="button" data-slide="prev">
    			<span class="icon-prev fa fa-angle-left" aria-hidden="true"></span>
    			<span class="sr-only">Previous</span>
    		</a>
    		<a class="right carousel-control" href="#carousel-category-block" role="button" data-slide="next">
    			<span class="icon-next fa fa-angle-right" aria-hidden="true"></span>
    			<span class="sr-only">Next</span>
    		</a>
    	</div>

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-sm-offset-6">
				<div class="btn-group btn-block dropdown">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fa fa-caret-down pull-right"></i>
						<i class="fa fa-download"></i>
						<span>Brochures</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li role="presentation" class="dropdown-header">English</li>
						<li class="dropdown-item">
							<a href="#">
								<i class="fa fa-eye"></i>
								<span>Preview</span>
							</a>
						</li>
						<li class="dropdown-item">
							<a href="http://www.scribd.com/document_downloads/138455093?extension=pdf&amp;from=embed&amp;source=embed">
								<i class="fa fa-download"></i>
								<span>Download</span>
							</a>
						</li>
						<li role="presentation" class="dropdown-divider"></li>
						<li role="presentation" class="dropdown-header">French</li>
						<li class="dropdown-item">
							<a href="#">
								<i class="fa fa-eye"></i>
								<span>Preview</span>
							</a>
						</li>
						<li class="dropdown-item">
							<a href="http://www.scribd.com/document_downloads/138455091?extension=pdf&amp;from=embed&amp;source=embed">
								<i class="fa fa-download"></i>
								<span>Download</span>
							</a>
						</li>
						<li role="presentation" class="dropdown-divider"></li>
					</ul>
				</div>
            </div>
        </div>
    </div>
</div>



Application block

Based on a .bloc, application blocks introduce an application by displaying a name, a short text and some call-to-action in a first column, and a carousel (see section Interactive components) in a second one.

Cereals

Do you grow cereal crops? Manitou provides solutions for cereal growers with the most demanding requirements. Over the years, we have developed particularly productive cereal handling solutions. Contact us to find out about all of the solutions that we can provide to accelerate your harvesting process, more simply store your cereal grains and efficiently handle the results of your work.

Whether it is compact telehandlers or heavy-duty forklifts, large capacity buckets or hooks to move big bags, we have a whole range of solutions for your needs.

Contact


Tunneling

The specific aspects of tunneling require very robust machines which absorb shocks and which are capable of working in dust-laden atmospheres and under extreme conditions. The range of Manitou solutions overcomes the constraints of managing your logistics platforms, construction and installing infrastructures (making arches, reinforcement and ventilation). Versatile and all-terrain, they optimize your fleet of machines while observing your safety requirements.

Contact our team dedicated to tunnels and find out how our solutions can increase your productivity.

Contact

<div class="bloc">
    <h2 class="border">Cereals</h2>
    <div class="row">
        <div class="application-content">
            <p>Do you grow cereal crops? Manitou provides solutions for cereal growers with the most demanding requirements. Over the years, we have developed particularly productive cereal handling solutions. Contact us to find out about all of the solutions that we can provide to accelerate your harvesting process, more simply store your cereal grains and efficiently handle the results of your work.</p>
            <p>Whether it is compact telehandlers or heavy-duty forklifts, large capacity buckets or hooks to move big bags, we have a whole range of solutions for your needs.</p>
            <p>
                <a href="#" class="btn btn-primary" title="Get in touch with a dealer, one of our subsidiaries or even our head office.">
                    <i class="fa fa-envelope"></i>
                    <span>Contact</span>
                </a>
            </p>
        </div>
        <div class="application-picture">
			<div id="carousel-application-block" class="carousel slide" data-ride="carousel">
	    		<div class="carousel-inner" role="listbox">
	    			<div class="carousel-item active">
	    				<img src="http://farm9.staticflickr.com/8262/8704568062_5f5514277f_z.jpg" alt="">
	    			</div>
	    			<div class="carousel-item">
	    				<img src="http://farm9.staticflickr.com/8332/8410333443_3ccba80ea0_z.jpg" alt="Second slide">
	    			</div>
	    			<div class="carousel-item">
	    				<img src="http://farm9.staticflickr.com/8402/8703533405_23403dece8_z.jpg" alt="Third slide">
	    			</div>
	    		</div>
	    		<a class="left carousel-control" href="#carousel-application-block" role="button" data-slide="prev">
	    			<span class="icon-prev fa fa-angle-left" aria-hidden="true"></span>
	    			<span class="sr-only">Previous</span>
	    		</a>
	    		<a class="right carousel-control" href="#carousel-application-block" role="button" data-slide="next">
	    			<span class="icon-next fa fa-angle-right" aria-hidden="true"></span>
	    			<span class="sr-only">Next</span>
	    		</a>
	    	</div>
        </div>
    </div>
</div>



Blog block

Based on a .bloc, the blog block introduces a blog post with a picture or a video, a title, some description text, some metadata and to call-to-action binded to the article.


Poutou Manutention ouvre ses portes pour son 45e anniversaire

Partenaire manutention des entreprises limousines depuis 1970, Poutou Manutention est heureux de vous accueillir le jeudi 17 septembre dans le cadre des portes ouvertes anniversaires.

De 10h00 à 21h00, venez découvrir l’ensemble de la gamme Manitou.

Cette journée anniversaire, étape de l’Actis Tour 2015, est une occasion pour nous de vous faire découvrir notre entreprise et de rassembler l’ensemble des ses acteurs : clients mais aussi fournisseurs, partenaires institutionnels et élus locaux.

  • Venez partager un moment convivial autour d’un buffet (midi et soir)
  • Tentez votre chance et gagnez des heures de location et des chèques entretien
  • Découvrez les dernières innovations lors de démonstrations
  • Échangez avec nos spécialistes industrie, bâtiment, agriculture ou environnement.

Rendez-vous le jeudi 17 septembre à partir de 10h au 28 Avenue du Ponteix, Zone Sud, Limoges.

Renseignements et inscriptions sur www.poutou.fr/45ans


View this post

  • fr
  • France
  • Poutou
  • Limoges
  • Manutention
  • Portes Ouvertes
  • Actis Tour
  • Agriculture
  • Construction
  • Industrie
  • Anniversaire

- 1 Comment(s)

<article class="bloc">
	<img src="http://41.media.tumblr.com/c27091e7dc2ea9acd515015a88c8ba90/tumblr_nuar3nmKFz1s6o9deo1_1280.jpg" alt="" class="img-responsive img-responsive-fluid">

	<hr>

	<h2>Poutou Manutention ouvre ses portes pour son 45e anniversaire</h2>
	<p>Partenaire manutention des entreprises limousines depuis 1970, Poutou Manutention est heureux de vous accueillir le jeudi 17 septembre dans le cadre des portes ouvertes anniversaires.</p>
	<p>De 10h00 à 21h00, venez découvrir l’ensemble de la gamme Manitou.</p>
	<p>Cette journée anniversaire, étape de l’<b>Actis Tour 2015</b>, est une occasion pour nous de vous faire découvrir notre entreprise et de rassembler l’ensemble des ses acteurs : clients mais aussi fournisseurs, partenaires institutionnels et élus locaux.</p>
	<ul>
		<li>Venez partager un moment convivial autour d’un buffet (midi et soir)<br></li>
		<li>Tentez votre chance et gagnez des heures de location et des chèques entretien</li>
		<li>Découvrez les dernières innovations lors de démonstrations<br></li>
		<li>Échangez avec nos spécialistes industrie, bâtiment, agriculture ou environnement.<br></li>
	</ul>
	<p>Rendez-vous le jeudi 17 septembre à partir de 10h au 28 Avenue du Ponteix, Zone Sud, Limoges.</p>
	<p>Renseignements et inscriptions sur <a href="http://www.poutou.fr/45ans">www.poutou.fr/45ans</a><br></p>
	<hr>

	<p>
		<a target="_blank" class="btn btn-primary" title="View this postblog on the Manitou Blog" href="#">
			<i class="fa fa-arrow-right"></i>
			<span>View this post</span>
		</a>
	</p>

	<ul class="tags">
		<li>
			<span>fr</span>
		</li>
		<li>
			<span>France</span>
		</li>
		<li>
			<span>Poutou</span>
		</li>
		<li>
			<span>Limoges</span>
		</li>
		<li>
			<span>Manutention</span>
		</li>
		<li>
			<span>Portes Ouvertes</span>
		</li>
		<li>
			<span>Actis Tour</span>
		</li>
		<li>
			<span>Agriculture</span>
		</li>
		<li>
			<span>Construction</span>
		</li>
		<li>
			<span>Industrie</span>
		</li>
		<li>
			<span>Anniversaire</span>
		</li>
	</ul>
	<p class="small">
		<time datetime="2015-09-07 07:50:11 GMT" pubdate="">
			<i class="fa fa-clock-o"></i>
			<span>Posted on</span>
			<span>Mon, 07 Sep 2015 07:50:11 GMT</span>

		</time>
		-
		<i class="fa fa-comments"></i>
		<span>1</span>
		<span>Comment(s)</span>
	</p>
</article>


Ultimate Cladding Solution

Discover our latest innovation for professional cladders : MRT 3255 + Platform + Winch on crane (aka “The cladding platform”).

Our client came to us with a specific need : being able to clad up to 32 m. 250 kg insulation panels (7 m. long). After study in our Taylored Solutions department, we came back to him with a complete solution. It also avoids the use of one platform and helps our client to save up a lot of money. Based on his latest job quotations, he will reimboursed his investment before the end of the year.


View this post Comment this post

  • en
  • Worldwide
  • Cladding
  • Cladder
  • MRT
  • Manitou
  • Construction
  • Bardage
  • Bardeur

- 0 Comment(s)

<article class="bloc">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe width="250" height="141" id="youtube_iframe" src="https://www.youtube.com/embed/_zOuhASuo4A?feature=oembed&amp;enablejsapi=1&amp;origin=http://safe.txmblr.com&amp;wmode=opaque" frameborder="0" allowfullscreen=""></iframe>
    </div>

    <hr>

    <h2>Ultimate Cladding Solution</h2>
    <p>Discover our latest innovation for professional cladders : <b>MRT 3255 + Platform + Winch on crane</b><i> (aka “The cladding platform”)</i>.</p>
    <p>Our client came to us with a specific need : being able to clad up to 32 m. 250 kg insulation panels (7 m. long). After study in our Taylored Solutions department, we came back to him with a complete solution. It also avoids the use of one platform and helps our client to save up a lot of money. Based on his latest job quotations, he will reimboursed his investment before the end of the year.</p>
    <hr>
    <p>
        <a target="_blank" class="btn btn-primary" title="View this postblog on the Manitou Blog" href="#">
            <i class="fa fa-arrow-right"></i>
            <span>View this post</span>
        </a>
        <a target="_blank" class="btn btn-default" title="Comment this postblog on the Manitou Blog" href="#">
            <i class="fa fa-comment"></i>
            <span>Comment this post</span>
        </a>
    </p>

    <ul class="tags">
        <li>
            <span>en</span>
        </li>
        <li>
            <span>Worldwide</span>
        </li>
        <li>
            <span>Cladding</span>
        </li>
        <li>
            <span>Cladder</span>
        </li>
        <li>
            <span>MRT</span>
        </li>
        <li>
            <span>Manitou</span>
        </li>
        <li>
            <span>Construction</span>
        </li>
        <li>
            <span>Bardage</span>
        </li>
        <li>
            <span>Bardeur</span>
        </li>

    </ul>
    <p class="small">
        <time datetime="2015-08-25 16:31:05 GMT" pubdate="">
            <i class="fa fa-clock-o"></i>
            <span>Posted on</span>
            <span>Tue, 25 Aug 2015 16:31:05 GMT</span>

        </time>
        -
        <i class="fa fa-comments"></i>
        <span>0</span>
        <span>Comment(s)</span>
    </p>
</article>



Event block

Based on a .bloc, the event block presents an event with an optional picture, a title and some data about the event, such as its date, its location or its stand number.


<article class="bloc">
    <div class="row">
        <div class="event-picture">
            <img class="img-responsive" alt="Conexpo Latin America" src="http://manitou.cdn.prismic.io/manitou/7874ec89a718afffa58a340ff1b831125a2571c4_conexpo6.jpg">
         </div>
        <div class="event-content">
            <h3 class="border">Conexpo Latin America</h3>
            <p>
                <i class="fa fa-calendar-o"></i>
                <time datetime="">2015-10-21</time>
                -
                <time datetime="">2015-10-24</time>
            </p>
            <p>
                <i class="fa fa-map-marker"></i>
                <span>Espacio Riesco, Avenida El Salto 5000, Santiago, Región Metropolitana</span>
                <span>-</span>
                <span class="text-capitalize">chile</span>
            </p>

            <p>
                <i class="fa fa-cube"></i>
                <span>829COAD</span>
            </p>

            <p>
                <i class="fa fa-external-link-square"></i>
                <a target="_blank" href="http://www.conexpolatinamerica.com/">http://www.conexpolatinamerica.com/</a>
            </p>
        </div>
    </div>
</article>



Event aside

The event aside presents the same data of an event block, but displays them in a shorter, quicker view in an <aside> to remind the users of a current event.

Right now


Pollutec

-

france


<div class="bloc bloc-border">
	<h2>Right now</h2>
	<hr>
	<div class="event-teaser">
		<a href="http://www.pollutec.com/" title="" target="_blank">
			<h3 >Pollutec</h3>
		</a>
		<p>
			<i class="fa fa-calendar"></i>
			<time datetime="" ng-bind="ev.start_date" class="ng-binding">2015-10-13</time>
			-
			<time datetime="" ng-bind="ev.end_date" class="ng-binding">2015-10-16</time>
		</p>
		<p>
			<i class="fa fa-map-marker"></i>
			<span>france</span>
		</p>
	</div>
	<hr>
</div>



Twitter flux

The twitter flux uses a custom embedded flux in a basic block.

On Twitter

<div class="card card-info">
	<div class="card-header">
		<h2>On Twitter</h2>
	</div>
	<div class="card-block">
		<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; height: 600px; padding: 0px; border: none; max-width: 520px; min-width: 180px; min-height: 200px; margin-top: 0px; margin-bottom: 0px;" data-widget-id="382527993114918913" data-user-id="769950" title="Twitter Timeline"></iframe>
	</div>
	<div class="card-footer">
		<a class="twitter-btn" href="https://twitter.com/intent/tweet?screen_name=manitou">Tweet us @Manitou</a>
	</div>
</div>