Var = $lightgrey01
Txt = .text-lightgrey01
BG = .bg-lightgrey01
#F7F9FE
$lightgrey02
Txt = .text-lightgrey02
BG = .bg-lightgrey02
#E4E9F3
$lightgrey03
Txt = .text-lightgrey03
BG = .bg-lightgrey03
#C3CFE5
$bluegrey01
Txt = .text-bluegrey01
BG = .bg-bluegrey01
#586882
$bluegrey02
Txt = .text-bluegrey02
BG = .bg-bluegrey02
#232D3E
$grey01
Txt = .text-grey01
BG = .bg-grey01
#E5E5E5
$grey02
Txt = .text-grey02
BG = .bg-grey02
#BDC4CC
$blue
Txt = .text-blue
BG = .bg-blue
#79A2D2
$red
Txt = .text-red
BG = .bg-red
#EB4656
$orange
Txt = .text-orange
BG = .bg-orange
#F49857
$green
Txt = .text-green
BG = .bg-green
#31B270

Grid-gutter : 30px;

SASS
CLASS
Ratio
Pixel
map-get($spacers, 1)
.p-1 .m-1 .pl-1 .ml-1 etc...
1/4
8 px
map-get($spacers, 2)
.p-2 .m-2 .pl-2 .ml-2 etc...
1/2
16 px
map-get($spacers, 3)
.p-3 .m-3 .pl-3 .ml-3 etc...
3/4
24 px
map-get($spacers, 4)
.p-4 .m-4 .pl-4 .ml-4 etc...
1
32 px
map-get($spacers, 5)
.p-5 .m-5 .pl-5 .ml-5 etc...
1 1/4
40 px
map-get($spacers, 6)
.p-6 .m-6 .pl-6 .ml-6 etc...
1 1/2
48 px
map-get($spacers, 7)
.p-7 .m-7 .pl-7 .ml-7 etc...
1 3/4
56 px
map-get($spacers, 8)
.p-8 .m-8 .pl-8 .ml-8 etc...
2
64 px
map-get($spacers, 9)
.p-9 .m-9 .pl-9 .ml-9 etc...
2 1/2
80 px
map-get($spacers, 10)
.p-10 .m-10 .pl-10 .ml-10 etc...
3
96 px
HEADINGS

Display — 40px

Display 2 — 45px

Display 3 — 50px

Display 4 — 60px

Title H1 line — 35px

Title H2 line — 28px regular

Title H3 line — 24px

Title H4 line — 20px

Title H5 line — 18px
Title H6 line — 16px

VLP Icon Font

icon-activite-sportive
icon-alert
icon-angle-bottom
icon-angle-left
icon-angle-right
icon-angle-top
icon-arrow-bottom
icon-arrow-left
icon-arrow-right
icon-arrow-top
icon-batiments-municipaux
icon-calendar
icon-citoyen-averti
icon-clock
icon-close
icon-coin
icon-collecte
icon-commerces-industries
icon-conference
icon-conseil
icon-cour
icon-culturel-loisir
icon-download
icon-email
icon-exit
icon-facebook
icon-file
icon-font-down
icon-font-up
icon-fullscreen
icon-googleplus
icon-home
icon-hommage
icon-info-citoyen
icon-info-municipal
icon-instagram
icon-link
icon-linkedin
icon-list
icon-location
icon-map-districts
icon-map-pin
icon-menu
icon-news
icon-notes
icon-organisations-associations
icon-parcs-espaces-verts
icon-phone
icon-pin
icon-pinterest
icon-plus
icon-politique
icon-print
icon-quote-close
icon-quote-open
icon-rainette
icon-reglement
icon-rss
icon-search
icon-services-en-ligne
icon-services-publics
icon-share
icon-star
icon-theatre
icon-tickets
icon-travaux
icon-twitter
icon-vlp
icon-warning-square
icon-warning
icon-website
icon-youtube

p.lead
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

p
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Buttons

Buttons line
lp-btn-link
Buttons basics
Primary
Secondary
Info
Success
Warning
Danger
Buttons sizes
Button lg
Button
Button sm
Button xs
Buttons with icons
a.btn icon before a.btn icon after
Flex height-stretch buttons
Button lg Button Button sm Button xs
Flex grow buttons
btn btn-success d-flex flex-grow-1
btn btn-warning d-flex flex-grow-1

Socials

NOTIFICATIONS D'ALERTE (4)

Fit to header
Full-width - démo

card-event (/templates-parts)

slider-news (/templates-parts)

Actualités22 avril 2024
Transition écologique La Prairie se dotera d’une politique de l’arbre

Dans le cadre du Jour de la Terre, la Ville de La Prairie annonce qu’elle a entamé une démarche visant à se doter d’une politique de l’arbre. Elle emboîte ainsi le pas à d’autres...

Lire la suite
Actualités4 avril 2024
Adaptation de la réglementation au climat La Ville dévoile les résultats d’une consultation citoyenne

Il est important que la Ville agisse relativement à la transition écologique. C’est ce qu’estiment la majorité des participants à un sondage mené l’automne dernier dans le cadre d’une...

Lire la suite
Actualités21 mars 2024
Bibliothèque Léo-Lecavalier Ce troisième lieu entre le bureau et la maison

Qu’est-ce qu’une bibliothèque? Cette question peut paraitre bien simple, mais ne vous y méprenez pas! Les bibliothèques sont en pleine transformation. Vous y alliez pour emprunter des livres?...

Lire la suite
Voir toutes les actualités

cta-img (/templates-parts)

test
6