Formatage des articles IRZ Tuto

This is a Header 1

This is a Header 2

This is a Header 3

This is a header 4

This is a header 5

This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.

This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.
This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.This is normal text. Let's do a bunch of this.


Blockquotes

"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"


Pre Text

Here's some text in a pre tag Here's some text in a pre tag Here's some text in a pre tag Here's some text in a pre tag

Pre Choice :

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

Vidéo

<div class="video widescreen">
[embed]http://www.dailymotion.com/video/xgly3z_lisser-les-bords-de-vos-detourages_tech[/embed]
</div>

Lists

Bullet list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four

Ordered list

  1. bullet list one
  2. bullet list two
  3. bullet list three
  4. bullet list four

Description Lists

For longer, step-by-step instructions, description lists are a great way to display content.
Here's a great example.

1
This is how you do step #1.
2
And this is how you do step #2
3
Finally, this is step #3
<dl>
  <dt>1</dt>
  <dd>This is how you do step #1.</dd>
  <dt>2</dt>
  <dd>And this is how you do step #2</dd>
  <dt>3</dt>
  <dd>Finally, this is step #3</dd>
</dl>

Note

By default, the number background in description lists is gray. We're using custom CSS to make our number background blue in other articles.

#fullArticle dt {
  background: #5291C8;
}

Tables

Generic Table

Month Savings
Sum $270
January $100
February $80
March $90

Striped table

Add class="table-striped"

Month Savings
Sum $270
January $100
February $80
March $90

Callouts

This is a yellow callout

Just add class="callout-yellow". It's really that easy.

<section class="callout-yellow">
  <h3>This is a yellow callout</h3>
  <p>Just add class="callout-yellow". It's really that easy.</p>
</section>

This is a blue callout

Just add class="callout-blue". It's really that easy.

<section class="callout-blue">
  <h3>This is a blue callout</h3>
  <p>Just add class="callout-blue". It's really that easy.</p>
</section>

This is a green callout

Just add class="callout-green". It's really that easy.

This is a red callout

Just add class="callout-red". It's really that easy.

This is a gray callout

Just add class="callout". It's really that easy.

Dashed Borders

Just add class="dashed". Ex. class="callout-yellow dashed"

<section class="callout-yellow dashed">
  <h3>This is a yellow dashed callout</h3>
  <p>Just add class="callout-yellow dashed". It's really that easy.</p>
</section>

Image Styles

By default, images include a rounded border:

Add class="noBdr" to remove the rounded border:

This is an image caption.

<img class="noBdr" src="image/path/here">
<span class="image-caption">This is an image caption.</span>

Image Lightbox

Help Scout re-sizes images to a maximum width of 1,000px and a maximum height of 800px. You can link to the image and give the link a class="lightbox" to open the large version in a lightbox on click:

<a href="//d33v4339jhl8k0.cloudfront.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg" class="lightbox"><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg"></a>