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és23 mars 2023
Projets estivaux Avec ou sans permis?

Vous avez pensé tout l’hiver aux travaux que vous souhaitez entreprendre et attendiez patiemment le printemps pour pouvoir les commencer? Avez-vous vérifié si vous avez besoin d’un permis?.

Lire la suite
Actualités22 mars 2023
Un bon tuyau à retenir Les égouts municipaux ne sont pas une poubelle

La présence d’amas de lingettes jetables et d’autres éléments difficilement biodégradables perturbe de plus en plus fréquemment la bonne marche du système d’égouts municipal. Lingettes...

Lire la suite
Actualités17 mars 2023
20 au 31 mars 2023 Travaux d’utilité publique sur le chemin de Saint-Jean

Du 20 au 31 mars, entre 7 h et 17 h, des travaux d’utilité publique seront réalisés sur le chemin de Saint-Jean (route 104), entre l’adresse civique numéro 2825 et la rivière Saint-Jacques....

Lire la suite
Voir toutes les actualités

cta-img (/templates-parts)

test
6