Iscriviti alla nostra newsletter ed entra nel #clangeorgici Iscriviti ora

Documentation

Vendita Piante Online
Gutemberg Blocks

Images not found

Upload the default images to create the documentation page
UPLOAD
Typography
Base-font-size:
Base-line-unit:
Breakpoints:

h1 - abcdefghijklmnopqrstuvwxyz

h2 - abcdefghijklmnopqrstuvwxyz

h3 - abcdefghijklmnopqrstuvwxyz

h4 - abcdefghijklmnopqrstuvwxyz

h5 - abcdefghijklmnopqrstuvwxyz
h6 - abcdefghijklmnopqrstuvwxyz

p - abcdefghijklmnopqrstuvwxyz

small - abcdefghijklmnopqrstuvwxyz 
<tag class="text-primary"> ... </tag>
F
r
ff
g
à
è 
<tag class="text-secondary"> ... </tag>
F
r
ff
g
à
è 
<tag class="text-primary"> ... </tag>

Aa123

Sample Text

<h1>Heading 1</h1>

Sample Text

<h2>Heading 2</h2>

Sample Text

<h3>Heading 3</h3>

Sample Text

<h4>Heading 4</h4>
Sample Text
<h5>Heading 5</h5>
Sample Text
<h6>Heading 6</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus. 

<p>Paragraphs</p>
Sample Text 
<small>small</small>
Sample Text Blockquote
<blockquote>blockquote</blockquote>
Sample Text Cite 
<cite>cite</cite>
<tag class="text-secondary"> ... </tag>

Aa123

Sample Text

<h1>Heading 1</h1>

Sample Text

<h2>Heading 2</h2>

Sample Text

<h3>Heading 3</h3>

Sample Text

<h4>Heading 4</h4>
Sample Text
<h5>Heading 5</h5>
Sample Text
<h6>Heading 6</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus. 

<p>Paragraphs</p>
Sample Text 
<small>small</small>
Sample Text Blockquote
<blockquote>blockquote</blockquote>
Sample Text Cite 
<cite>cite</cite>

Contrast

<tag class="text-primary"> ... </tag>

Aa123

Sample Text

<h1>Heading 1</h1>

Sample Text

<h2>Heading 2</h2>

Sample Text

<h3>Heading 3</h3>

Sample Text

<h4>Heading 4</h4>
Sample Text
<h5>Heading 5</h5>
Sample Text
<h6>Heading 6</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus. 

<p>Paragraphs</p>
Sample Text 
<small>small</small>
<tag class="text-secondary"> ... </tag>

Aa123

Sample Text

<h1>Heading 1</h1>

Sample Text

<h2>Heading 2</h2>

Sample Text

<h3>Heading 3</h3>

Sample Text

<h4>Heading 4</h4>
Sample Text
<h5>Heading 5</h5>
Sample Text
<h6>Heading 6</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus. 

<p>Paragraphs</p>
Sample Text 
<small>small</small>
<tag class="text-primary"> ... </tag>

Aa123

LIST SQUARE

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST DISC

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST CIRCLE

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST DECIMAL

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet..

<tag class="text-secondary"> ... </tag>

Aa123

LIST SQUARE

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST DISC

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST CIRCLE

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

LIST DECIMAL

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus ut elit tortor.
  • Vestibulum luctus nunc eu urna molestie iaculis.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet..

Icons
How to use: <i class="icon-align-left"></i>
abc
align-left
align-middle
align-right
Shape Created with Sketch. arrow-down
Artboard Created with Sketch. arrow-left
Artboard Created with Sketch. arrow-right
bell
blank
bluetooth
box
browser
buy-refund
camera
Shape Created with Sketch. cart
catalog
chat
check-mark
clock
close
compass
connection
cursor
display
c> download
drag Created with Sketch. drag
drop
empty-blank
equalizer Created with Sketch. equalizer
Fill 252 Created with Sketch. facebook
Group 2 Created with Sketch. filters
flag
forward-2
forward
free-shipping
gift
grammar
graphic
grid
hamburger-menu
headphones
heart
home
hyperlink
Fill 253 Created with Sketch. instagram
justify-all
key
label
lock-closed
lock-open
magnet
magnifying-glass-2
magnifying-glass-minus
magnifying-glass-plus
magnifying-glass
mail
map-pin
map
maximize
microphone
minimize
minus
mouse
music
navigation
notifications
pause
Fill 257 Created with Sketch. pinterest
Path 7 Created with Sketch. play
plus
power
print
rating
repeat
selection
settings
share
shipped
shuffle
sound-minus
sound-plus
speaker
star
statistics
stop
trash-bin
upload
Group 2 Created with Sketch. youtube
Colors palette
Color Primary:
Color Secondary:
Color Black:
Color Grey:
Color White:
Color Success:
Color Warning:
Color Error:
Brand identity
Logo
Logo Georgiche Created with Sketch.
Favicon
Icon
No Image
Buttons
<a class="button"></a>
BUTTON
<a class="button button--secondary"></a>
BUTTON SECONDARY
<a class="button button--small"></a>
BUTTON SMALL
<a class="button button--large"></a>
BUTTON LARGE
<a class="button button--active"></a>
BUTTON ACTIVE
<a class="button is-disabled"></a>
BUTTON DISABLED
<a class="button button--pill"></a>
BUTTON PILL
<a class="button button--rounded"></a>
BUTTON ROUNDED
<a class="button button--full-width"></a>
BUTTON FULL WIDTH
<a class="button button--centered"></a>
BUTTON CENTERED
Form




Message
<tag class="message"> ... </tag>
<tag class="message has-error"> ... </tag>
<tag class="message has-success"> ... </tag>
<tag class="message has-warning"> ... </tag>
<tag class="message message--secondary"> ... </tag>
<tag class="message message--bordered"> ... </tag>
<tag class="message message--fill"> ... </tag>
<tag class="message message--small"> ... </tag>
<tag class="message message--fill message--big"> ... </tag>
<tag class="message message--fill message--rounded"> ... </tag>
<tag class="message message--bordered message--pill"> ... </tag>