Documentation

Digital Thinker
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: <?php ground_icon('shopping-cart'); ?>
abstract
add-r
add
adidas
airplane
alarm
album
align-bottom
align-center
align-left
align-middle
align-right
align-top
anchor
apple-watch
arrange-back
arrange-front
arrow-align-h
arrow-align-v
arrow-bottom-left-o
arrow-bottom-left-r
arrow-bottom-left
arrow-bottom-right-o
arrow-bottom-right-r
arrow-bottom-right
arrow-down-o
arrow-down-r
arrow-down
arrow-left-o
arrow-left-r
arrow-left
arrow-long-down-c
arrow-long-down-e
arrow-long-down-l
arrow-long-down-r
arrow-long-down
arrow-long-left-c
arrow-long-left-e
arrow-long-left-l
arrow-long-left-r
arrow-long-left
arrow-long-right-c
arrow-long-right-e
arrow-long-right-l
arrow-long-right-r
arrow-long-right
arrow-long-up-c
arrow-long-up-e
arrow-long-up-l
arrow-long-up-r
arrow-long-up
arrow-right-o
arrow-right-r
arrow-right
arrow-top-left-o
arrow-top-left-r
arrow-top-left
arrow-top-right-o
arrow-top-right-r
arrow-top-right
arrow-up-o
arrow-up-r
arrow-up-right-24
arrow-up
arrows-breake-h
arrows-breake-v
arrows-exchange-alt-v
arrows-exchange-alt
arrows-exchange-v
arrows-exchange
arrows-expand-down-left
arrows-expand-down-right
arrows-expand-left-alt
arrows-expand-left
arrows-expand-right-alt
arrows-expand-right
arrows-expand-up-left
arrows-expand-up-right
arrows-h-alt
arrows-h
arrows-merge-alt-h
arrows-merge-alt-v
arrows-scroll-h
arrows-scroll-v
arrows-shrink-h
arrows-shrink-v
arrows-v-alt
arrows-v
assign
asterisk
atlasian
attachment
attribution
awards
backspace
band-aid
battery-empty
battery-full
battery
bee
bell
bitbucket
block
bmw
board
bolt
bookmark
border-all
border-bottom
border-left
border-right
border-style-dashed
border-style-dotted
border-style-solid
border-top
bot
bowl
box
boy
brackets
briefcase
browse
browser
brush
bulb
c-plus-plus
calculator
calendar-dates
calendar-due
calendar-next
calendar-today
calendar-two
calendar
calibrate
camera
cap
captions
card-clubs
card-diamonds
card-hearts
card-spades
carousel
cast
chanel
chart
check-o
check-r
check
chevron-double-down-o
chevron-double-down-r
chevron-double-down
chevron-double-left-o
chevron-double-left-r
chevron-double-left
chevron-double-right-o
chevron-double-right-r
chevron-double-right
chevron-double-up-o
chevron-double-up-r
chevron-double-up
chevron-down-o
chevron-down-r
chevron-down
chevron-left-o
chevron-left-r
chevron-left
chevron-right-o
chevron-right-r
chevron-right
chevron-up-o
chevron-up-r
chevron-up
circleci
clapper-board
clipboard
close-o
close-r
close
cloud
code-climate
code-slash
code
coffee
collage
color-bucket
color-picker
comedy-central
comment
community
components
compress-left
compress-right
compress-v
compress
controller
copy
copyright
corner-double-down-left
corner-double-down-right
corner-double-left-down
corner-double-left-up
corner-double-right-down
corner-double-right-up
corner-double-up-left
corner-double-up-right
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
credit-card
crop
cross
crowdfire
crown
danger
dark-mode
data
database
debug
designmodo
desktop
details-less
details-more
dialpad
dice-1
dice-2
dice-3
dice-4
dice-5
dice-6
digitalocean
disc
display-flex
display-fullwidth
display-grid
display-spacing
distribute-horizontal
distribute-vertical
dock-bottom
dock-left
dock-right
dock-window
dolby
dollar
dribbble
drive
drop-invert
drop-opacity
drop
duplicate
edit-black-point
edit-contrast
edit-exposure
edit-fade
edit-flip-h
edit-flip-v
edit-highlight
edit-markup
edit-mask
edit-noise
edit-shadows
edit-straight
edit-unmask
eject
enter
erase
ereader
ericsson
ethernet
euro
eventbrite
expand
export
extension-add
extension-alt
extension-remove
extension
external
eye-alt
eye
facebook
feed
figma
file-add
file-document
file-remove
file
film
filters
flag-alt
flag
folder-add
folder-remove
folder
font-height
font-spacing
format-bold
format-center
format-color
format-heading
format-indent-decrease
format-indent-increase
format-italic
format-justify
format-left
format-line-height
format-right
format-separator
format-slash
format-strike
format-text
format-underline
format-uppercase
framer
games
gender-female
gender-male
ghost-character
ghost
gift
girl
git-branch
git-commit
git-fork
git-pull
gitter
glass-alt
glass
globe-alt
globe
google-tasks
google
gym
hashtag
headset
heart
hello
home-alt
home-screen
home
icecream
if-design
image
import
inbox
indie-hackers
infinity
info
inpicture
insert-after-o
insert-after-r
insert-after
insert-before-o
insert-before-r
insert-before
insights
instagram
internal
key
keyboard
keyhole
laptop
lastpass
layout-grid-small
layout-grid
layout-list
layout-pin
linear
link
linkedin
list-tree
list
live-photo
loadbar-alt
loadbar-doc
loadbar-sound
loadbar
lock-unlock
lock
log-in
log-off
log-out
loupe
magnet
mail-forward
mail-open
mail-reply
mail
math-divide
math-equal
math-minus
math-percent
math-plus
maximize-alt
maximize
maze
media-live
media-podcast
menu-boxed
menu-cake
menu-cheese
menu-grid-o
menu-grid-r
menu-hotdog
menu-left-alt
menu-left
menu-motion
menu-oreos
menu-right-alt
menu-right
menu-round
menu
merge-horizontal
merge-vertical
mic
microbit
microsoft
mini-player
minimize-alt
minimize
modem
monday
moon
more-alt
more-o
more-r
more-vertical-alt
more-vertical-o
more-vertical-r
more-vertical
more
mouse
move-down
move-left
move-right
move-task
move-up
music-note
music-speaker
music
nametag
notes
notifications
npm
oculus
open-collective
options
organisation
overflow
pacman
password
path-back
path-crop
path-divide
path-exclude
path-front
path-intersect
path-outline
path-trim
path-unite
patreon
paypal
pen
pentagon-bottom-left
pentagon-bottom-right
pentagon-down
pentagon-left
pentagon-right
pentagon-top-left
pentagon-top-right
pentagon-up
performance
pexels
phone
photoscan
piano
pill
pin-alt
pin-bottom
pin-top
pin
play-backwards
play-button-o
play-button-r
play-button
play-forwards
play-list-add
play-list-check
play-list-remove
play-list-search
play-list
play-pause-o
play-pause-r
play-pause
play-stop-o
play-stop-r
play-stop
play-track-next-o
play-track-next-r
play-track-next
play-track-prev-o
play-track-prev-r
play-track-prev
plug
pocket
pokemon
polaroid
poll
presentation
printer
product-hunt
profile
pull-clear
push-chevron-down-o
push-chevron-down-r
push-chevron-down
push-chevron-left-o
push-chevron-left-r
push-chevron-left
push-chevron-right-o
push-chevron-right-r
push-chevron-right
push-chevron-up-o
push-chevron-up-r
push-chevron-up
push-down
push-left
push-right
push-up
qr
quote-o
quote
radio-check
radio-checked
ratio
read
readme
record
redo
remote
remove-r
remove
rename
reorder
repeat
ring
row-first
row-last
ruler
sand-clock
scan
screen-mirror
screen-shot
screen-wide
screen
scroll-h
scroll-v
search-found
search-loading
search
select-o
select-r
select
server
serverless
shape-circle
shape-half-circle
shape-hexagon
shape-rhombus
shape-square
shape-triangle
shape-zigzag
share
shield
shopping-bag
shopping-cart
shortcut
shutterstock
sidebar-open
sidebar-right
sidebar
signal
size
sketch
slack
sleep
smart-home-boiler
smart-home-cooker
smart-home-heat
smart-home-light
smart-home-refrigerator
smart-home-wash-machine
smartphone-chip
smartphone-ram
smartphone-shake
smartphone
smile-mouth-open
smile-neutral
smile-no-mouth
smile-none
smile-sad
smile-upside
smile
software-download
software-upload
sort-az
sort-za
space-between-v
space-between
spectrum
spinner-alt
spinner-two-alt
spinner-two
spinner
square
stack
stark
stopwatch
stories
studio
style
sun
support
swap-vertical
swap
sweden
swiss
sync
tab
tag
tally
tap-double
tap-single
template
tennis
terminal
terrain
thermometer
thermostat
tikcode
time
timelapse
timer
today
toggle-off
toggle-on
toggle-square-off
toggle-square
toolbar-bottom
toolbar-left
toolbar-right
toolbar-top
toolbox
touchpad
track
transcript
trash-empty
trash
tree
trees
trello
trending-down
trending
trophy
tv
twilio
twitter
ui-kit
umbrella
unavailable
unblock
undo
unfold
unsplash
usb-c
usb
user-add
user-list
user-remove
user
userlane
view-cols
view-comfortable
view-day
view-grid
view-list
view-month
view-split
vinyl
voicemail-o
voicemail-r
voicemail
volume
webcam
website
windows
work-alt
yinyang
youtube
zeit
zoom-in
zoom-out
Colors palette
Color Primary:
Color Secondary:
Color Black:
Color Grey:
Color White:
Color Success:
Color Warning:
Color Error:
Brand identity
Logo
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>