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
Buttons sizes
Buttons with icons
a.btn icon before a.btn icon after
Flex height-stretch buttons
Flex grow buttons

Socials


NOTIFICATIONS D'ALERTE (4)

Fit to header
Full-width - démo

card-event (/templates-parts)


slider-news (/templates-parts)

Actualités19 juin 2024
Taxe sur l'immatriculation La Ville de La Prairie dénonce la hausse annoncée

Par le biais d’une résolution adoptée lors de la séance du conseil d’hier soir, le conseil municipal de La Prairie a exprimé son profond désaccord envers la décision de la Communauté...

Actualités11 juin 2024
Travaux routiers Respectez la signalisation : il en va de la sécurité de tous!

Avec le beau temps viennent les chantiers. Chaque été, les cols bleus de la Ville sont sur le terrain pour améliorer les infrastructures. Mais derrière les zones de travaux se cachent des risques...

Actualités5 juin 2024
Prolongement de la rue Saint-Henri Le nouveau passage à niveau maintenant ouvert

Après plusieurs années de collaboration avec le Canadien National, la Ville est heureuse d’annoncer que les travaux de construction du nouveau passage à niveau entre la rue des Conseillers et...

Voir toutes les actualités

cta-img (/templates-parts)

test

5