Documentation

Federico Fashion Style

Blocks

Images not found

Upload the default images to create the documentation page

UPLOAD

Typo

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>

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

<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

<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

<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

<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

Paragraphs

<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

Paragraphs

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

american-express

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

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

assistenza-clienti

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

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

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-full

instagram

internal

key

keyboard

keyhole

laptop

lastpass

layout-grid-small

layout-grid

layout-list

layout-pin

linear

link

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

mastercard

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

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

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

pagamenti-sicuri

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

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

quote-o

quote

radio-check

radio-checked

ratio

read

readme

record

redo

remote

remove-r

remove

rename

reorder

repeat

resi

ring

row-first

row-last

ruler

sand-clock

scan

screen-mirror

screen-shot

screen-wide

screen

scroll-h

scroll-v

search-found

search-loading

select-o

select-r

select

server

serverless

shape-circle

shape-half-circle

shape-hexagon

shape-rhombus

shape-square

shape-triangle

shape-zigzag

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

spedizione

spinner-alt

spinner-two-alt

spinner-two

spinner

square

stack

stark

stopwatch

stories

stripe

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

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

visa

voicemail-o

voicemail-r

voicemail

volume

webcam

website

windows

work-alt

yinyang

youtube

zeit

zoom-in

zoom-out

Colors

Color Primary:

Color Secondary:

Color Black:

Color Grey:

Color White:

Color Success:

Color Warning:

Color Error:

Brand

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>