Components - Molecules
ListItem
Variant 1: Icon Size 32px
List Item Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Variant 2: Icon Size 24px
List Item Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
ListItem - RichText
Another version of ListItem that allows RichText instead of Paragraph
Variant 1: RichText is smaller text size with DarkGrey color
Looking for Yoga?
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.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
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.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Variant 2: RichText is larger text size with DarkGrey color
Looking for Yoga?
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.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
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.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
ListItem - Black Description Text
Simple Icon & Description Only
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
TextLink - HeaderNav
TextLink white color used in the HeaderNav when it is Tablet size or below
TextLink - White
TextLink white color version. Allows to hide & show icons on left and right. Used in Header Navigation
Variant 1: Icon size 16px
Variant 2: Icon size 24px
TextLink - Slanted Teal
Button - Green Outlined
Text
Button - Dark Outlined
Variant1: Base / Variant 2: Full Width
Text
Text
Button - Green Solid
Variant 1: Base / Variant 2: Full Width / Variant 3: More Mobile Y Padding
Text
Text
Text
Button - White
Set as default
FilterButton
Only used in Forms. When clicked/selected, the BG color will change and an Icon will show up
Testimonial
Used in Testimonial Slider in Careers page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Heading
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Components - Organisms
NavCard - Highlight
Used in Highlights component in TopPage, Community Events & Careers Page. Text size becomes smaller when it is Mobile Size.
Variant 1: Has Link and Hover
SubNavCard
Looks similar to ListItem, but the difference is that SubNavCard allows hover states, and the Icon is placed center of the content.
Variant 1: Has Link & Hover
Accordion with Caret
You can open and close content. Content is richText
Heading
Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
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.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Accordion with Plus
Looks the same as the Accordion above, but this one uses a Plus Icon and the Background color is lighter. Content is richText, and you have the option to take out the black border on the top.
Heading
Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Accordion for Pricing Page
Looks similar to Accordion with Caret, but you have 3 Options/Types by hiding and showing (not variant). There are extra text fields.
Option 1: No Dropdown No Link
Option 2: Has Dropdown
Price Title
$00.00
Price Title
$00.00
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Mini Card
Looks similar to Accordion with Caret, but you have 3 Options/Types by hidding and showing (not variant). There are extra text fields.
Variant 1: With Overlay
.jpg)
Variant 2: No Overlay
FeatureCard
Currently only used in Pricing Page for Memberships, but flexible for any data.
This is some text inside of a div block.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Subscription Form - General
Subscription Form general inquiries. Once it is hooked to Make.com, all the instances of this component will always subscript to the same list.
Shows Brevo BC Form by default, but if user chose Winnipeg for location, should show Mailchimp MB List
Variant 1: For Light Bg
Email confirmation sent!
To complete the subscription, please click the link sent in the confirmation email. If you don’t see it, check your spam folder or try subscribing again.
Email confirmation sent!
To complete the subscription, please click the link sent in the confirmation email. If you don’t see it, check your spam folder or try subscribing again.
Variant 2: For Dark BG
Email confirmation sent!
To complete the subscription, please click the link sent in the confirmation email. If you don’t see it, check your spam folder or try subscribing again.
Email confirmation sent!
To complete the subscription, please click the link sent in the confirmation email. If you don’t see it, check your spam folder or try subscribing again.
Subscription Form - Youth
Subscription Form youth page. Once it is hooked to Make.com, all the instances of this component will always subscript to the same list.
Shows Brevo BC Form by default, but if user chose Winnipeg for location, should show Mailchimp MB List
Email confirmation sent!
To complete the subscription, please click the link sent in the confirmation email. If you don’t see it, check your spam folder or try subscribing again.
Benefits
List of Icon and description
Benefits
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Hive Staffers are encouraged to take advantage of their free gym membership to climb and attend fitness classes, at any of our locations.
Components - Templates
GalleryImageCard
Looks similar to Horizontal Card but the right side has different design
Heading
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Supervision Card
Vertical Card
Looks similar to Supervision Card, but the bottom part of the card has different design
Variant 2: Courses
Header Dropdown Menu
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
