Button
TODO: Describe Button component
Button Styles
Button Targets
Button Widths
Button Alignments
Button with Mobile Variation
Button with Icon
Button Edge Case with long text
Container
Container component allows for the creation of a container for multiple additional components on a page and can be used to group other components and apply a common style or layout
Container Widths
Width: Default Max width
Width: Max width for inner content
Width: Full width
Container Colors
Background: Primary (Red #C60C30)
Background: Primary Dark (Dark Red #9B0723)
Background: Secondary (Teal #007B87)
Background: Secondary Dark (Dark Teal #00626B)
Background: Secondary Darker (Darker Teal #004248)
Background: Tertiary 1 (Pastel Green #DCE8E4)
Background: Tertiary 2 (Lightest Teal #F2FBFC)
Background: Tertiary 3 (BlueGrayish #E6EEEF)
Background: Neutral Darker (Darker Gray #333333)
Background: Neutral Lighter (Lighter Gray #F0F0F0)
Background: Pastel Beige (Light Beige #F3EFEC)
Background: Pastel Green (Light Green #F5F6F5)
Background: Pastel Gray (Light Gray #f7f7f7)
Container Vertical Padding
Vertical Padding: None
Vertical Padding: X-Small (24px)
Vertical Padding: Small (48px)
Vertical Padding: Medium (64px)
Vertical Padding: Large (80px)
Container - Nested Container
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Container - With Gutter around child components
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Container - Vertical Align Stretch (Default)
Lorem ipsum
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum
Container - Vertical Align Top
Lorem ipsum
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum
Container - Vertical Align Middle
Lorem ipsum
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum
Container - Vertical Align Bottom
Lorem ipsum
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum
Container - Vertical Align Stretch + Vertical Align in Child Components
VAlign Middle: Lorem ipsum
VAlign Middle: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
VAlign Bottom: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
VAlign Top: Lorem ipsum
Container - With Dark Background Image
Width: Default Max Width
Background: Neutral Dark + Bakcground Image
Vertical Padding: Medium
Container - With Light Background Image
Width: Default Max Width
Background: Neutral Light + Bakcground Image
Vertical Padding: Medium
Hero Banner
TODO: Describe Hero Banner component
Hero Banner - Category Pages
Hero Banner - Product Pages
Hero Banner - Sub Product Pages
Hero Banner - FAQ Pages
Hero Banner - Edge Case with too much content
Separator
TODO: Describe Separator component
Text
Text Component is a rich text editing and composing component that allows for easy text editing in a simplified, in-line editor as well as a full screen format.
Text - XXX Large
Lorem Ipsum is simply2 dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - XX Large
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - X Large
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - Large
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - Medium
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - Small
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - X Small
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Text - List Style Checkmark
- Lorem Ipsum is simply dummy text
Title
TODO: Describe Title component
Title Heading 1 - H1 Tag (54px/36px)
Title Heading 2 - H2 Tag (40px/20px)
Title Heading 3 - H3 Tag (32px/18px)
Title Heading 4 - H4 Tag (24px/17px)
Title Heading 5 - H5 Tag (20px/16px)
Heading Level 1 - Style (54px/36px)
Heading Level 2 - Style (40px/20px)
Heading Level 3 - Style (32px/18px)
Heading Level 4 - Style (24px/17px)
Heading Level 5 - Style (20px/16px)
Heading Level 6 - Style (18px/14px)
Title - Align Center
Title - Strong
Title with HTML TM
test Lorem ipsum dolor sit amet
Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula dui, finibus sit amet pellentesque id, vehicula et est. Sed pharetra euismod justo. Proin feugiat volutpat metus in pretium. Vivamus porttitor dolor nec consectetur iaculis. Ut fermentum, purus id maximus ornare, quam velit eleifend erat, sagittis ullamcorper felis metus nec nulla. Vivamus placerat neque id tristique dictum. Duis risus dolor, viverra in gravida a, eleifend sit amet justo. Praesent a dolor felis. Nunc eu ex eu turpis dapibus interdum. Ut accumsan efficitur vulputate. Morbi elit ipsum, pharetra et laoreet in, condimentum non erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin et ligula non nisi vulputate porta. Pellentesque id nibh vitae diam feugiat mattis vitae et enim. Praesent arcu eros, malesuada in ex sed, varius suscipit elit. Ut ullamcorper, augue quis condimentum sollicitudin, nulla lacus pellentesque lectus, et commodo velit metus sed justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula dui, finibus sit amet pellentesque id, vehicula et est. Sed pharetra euismod justo. Proin feugiat volutpat metus in pretium. Vivamus porttitor dolor nec consectetur iaculis. Ut fermentum, purus id maximus ornare, quam velit eleifend erat, sagittis ullamcorper felis metus nec nulla. Vivamus placerat neque id tristique dictum. Duis risus dolor, viverra in gravida a, eleifend sit amet justo. Praesent a dolor felis. Nunc eu ex eu
Test
- turpis dapibus interdum. Ut accumsan efficitur vulputate. Morbi elit ipsum, pharetra et laoreet in, condimentum non erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin et ligula non nisi vulputate porta. Pellentesque id nibh vitae diam feugiat mattis vitae et enim. Praesent arcu eros, malesuada in ex sed, varius suscipit elit. Ut ullamcorper, augue quis condimentum sollicitudin, nulla lacus pellentesque lectus, et commodo velit metus sed justo.
- Test
- Test
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula dui, finibus sit amet pellentesque id, vehicula et est. Sed pharetra euismod justo. Proin feugiat volutpat metus in pretium. Vivamus porttitor dolor nec consectetur iaculis. Ut fermentum, purus id maximus ornare, quam velit eleifend erat, sagittis ullamcorper felis metus nec nulla. Vivamus placerat neque id tristique dictum. Duis risus dolor, viverra in gravida a, eleifend sit amet justo. Praesent a dolor felis. Nunc eu ex eu turpis dapibus interdum. Ut accumsan efficitur vulputate. Morbi elit ipsum, pharetra et laoreet in, condimentum non erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin et ligula non nisi vulputate porta. Pellentesque id nibh vitae diam feugiat mattis vitae et enim. Praesent arcu eros, malesuada in ex sed, varius suscipit elit. Ut ullamcorper, augue quis condimentum sollicitudin, nulla lacus pellentesque lectus, et commodo velit metus sed justo.
Didn’t find what you were looking for?
Icon
Icon inside dark container
Icon inside light container
Info Banner
Download the app sit amet, consectetur adipiscing elit.
Banner
Perks and savings
Image
Programs and add-ons
Discover the best way to save on your home insurance policy.
Good Record Protection
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Faucibus aliquet faucibus sollicitudin nec non ridiculus urna.
Protect what matters most to you
There’s nothing like the feeling of bringing security to your family. Owning your own home can bring you joy and become a part of who you are. To protect that home, and everything you keep there, means peace of mind for you and the people who share your home. With Intact Insurance, you can benefit from protections that suit your needs with features designed with you in mind.
Icon Library - Dark
24/7
60 years experience
Back
Battery
Boat
Bookmark
Bundle
Bundle 2
Car
Car Care
Card
Check Mark
Claim
Claim (Edit)
Claim (Track)
Claim - Car (Done)
Claim - Car (Edit)
Claim - Home
Clock
Condo
Convivial
Cottage
Customer
Crash
Documents
Drive
Gaz
Home
Home Based Business
Insurance Documents
Keys
Laptop and Smartphone
Liability
Motorcycle
Paperless
Phone
Pink Slip
Piggy Bank
Plane
Real Time
Receipt
Rental
Roadside
RV
RV Trailer
Secure
Smartphone
Snow Mobile
SOS Identity
Sign
Star
Tire
Truck
Weather
Winch
New Icons added to the list
Additional Building
Baggage Loss
Claims - Advantage
Electric Vehicle
Fair Rental Value
Good Home Benefit
Good Recored Protection
Lifestyle Advantage
Personal Property Instorage
Trip Interruption
Water Damage
You
Tenants
Store
Replacement
Lifestyle Advantage 2
Liability 2
Detailed Quote
ATV
Icon Library - Light
24/7
60 years experience
Back
Battery
Boat
Bookmark
Bundle
Bundle 2
Car
Car Care
Card
Check Mark
Claim
Claim (Edit)
Claim (Track)
Claim - Car (Done)
Claim - Car (Edit)
Claim - Home
Clock
Condo
Convivial
Cottage
Customer
Crash
Documents
Drive
Gaz
Home
Home Based Business
Insurance Documents
Keys
Laptop and Smartphone
Liability
Motorcycle
Paperless
Phone
Pink Slip
Piggy Bank
Plane
Real Time
Receipt
Rental
Roadside
RV
RV Trailer
Secure
Smartphone
Snow Mobile
SOS Identity
Sign
Star
Tire
Truck
Weather
Winch
New Icons added to the list
Additional Building
Baggage Loss
Claims - Advantage
Electric Vehicle
Fair Rental Value
Good Home Benefit
Good Recored Protection
Lifestyle Advantage
Personal Property Instorage
Trip Interruption
Water Damage
You
Tenants
Store
Replacement
Lifestyle Advantage 2
Liability 2
Detailed Quote
ATV
Get a house insurance quote in Quebec
With so many house insurance options, it can be confusing and time-consuming to compare them all yourself. That’s where insurance brokers and agents can help. Talk to a broker or an agent today about the protection you need.