Fira Sans Medium
font-family: fira_sansmedium
Fira Sans Thin
font-family: fira_sansthin
Open Sans Light
font-family: open_sanslight
Open Sans Light Italic
font-family: open_sanslight_italic
Open Sans Regular
font-family: open_sansregular
Open Sans Italic
font-family: open_sansitalic
Open Sans Semi Bold
font-family: open_sanssemibold
Open Sans Semi Bold Italic
font-family: open_sanssemibold_italic
Open Sans Bold
font-family: open_sansbold
Open Sans Bold Italic
font-family: open_sansbold_italic
Open Sans Extra Bold
font-family: open_sansextrabold
Open Sans Extra Bold Italic
font-family: open_sansextrabold_italic
var(--grass-color)
.grass-color
var(--grass-color-alt)
.grass-color-alt
var(--grass-color-light)
.grass-color-light
var(--grass-color-dark)
.grass-color-dark
var(--white-color)
.white-color
var(--grey-color-light)
.grey-color-light
var(--grey-color-dark)
.grey-color-dark
var(--black-color)
.black-color
The GRASS GIS logo is used as scalable vector graphics (SVG).
<img src="../../images/logos/grasslogo.svg" width="33%" alt="GRASS GIS" />
The GRASS GIS logo is also used as a simplified vector shape able to scale across media.
<i class="ms ms-grass-gis ms-7x"></i>
<i class="ms ms-grass-gis ms-5x grass-green-alt"></i>
<i class="ms ms-grass-gis ms-2x grass-green"></i>
# Section title
## Page title
### Section subtitle
Default
Default
Italic
*Italic*
Bold
**Bold**
Blockquote
> Blockquote
code
<p class="command">code</p>
<span class="grey-color-dark"><i class="fa fa-calendar"></i> date</span>
<span class="badge badge-pill bg-lgr grass-green"><i class="fa fa-calendar"></i> 11 Dec 2019 >/span>
<div class="alert rounded-0 alert-default">Default alert </div>
<div class="alert rounded-0 alert-info">Info alert </div>
<div class="alert rounded-0 alert-success">Success alert </div>
<div class="alert rounded-0 alert-success">Warning alert </div>
<div class="alert rounded-0 alert-success">Danger alert </div>
<div class="card">
<h4><i class="fa fa-info-circle"></i> Card</h4>
</div>
[Default md link](http://domain.org)
<a href="http://domain.org">Default html link</a>
<a href="http://domain.org">Default html link</a>
<a href="http://domain.org" class="btn btn-primary">Primary Button</a>
<a href="http://domain.org" class="btn btn-secondary">Secondary Button</a>
<a href="http://domain.org" class="btn btn-info">Info Button</a>
<a href="http://domain.org" class="btn btn-warning">Warning Button</a>
<a href="http://domain.org" class="btn btn-danger">Danger Button</a>
<i class="fa fa-download"></i>
<i class="ms ms-grass-gis"></i>
<i class="flag-icon flag-icon-de"></i>
![GRASS GIS banner](/images/logos/banner.jpg "GRASS GIS banner")
HTML
<img href="/images/logos/banner.jpg" alt="GRASS GIS banner" />
![Black Canyon](/images/other/Black_canyon_map.jpg "Black Canyon Map")
HTML
<img href="/images/other/Black_canyon_map.jpg" alt="Black Canyon Map" />
<img href="/images/other/GRASS_analysis.jpg" alt="Analysis" width="200" />
<img href="/images/gallery/raster/d_rast_arrow_magnitude.png" alt="flow" width="100" />