Your cart is currently empty!
HARI Official Brand Site
Block Library
- Block Library
- General Guidelines
- Color Reference
- Class Library
- Class
- Description
- Type Styles
- This is an h2, used to break up sections within a page.
- Homepage Hero
- Grouped PDP Hero
- Grouped PDP Icon Band
- Internal Page Hero
- Vertical Tabbed Drawers
- Cover Block CTA
- Resource CTAs
- Learn More Grid
- 50/50 Imagery Within Posts
- Archive & Post Featured Image
- You May Also Like Block
- You May Also Like…
- Avian Care Video Embed or Image Layout Grid Block
- Popular Posts
- Avian Care 2Col with Product Category CTA (Old)
- Table Options
General Guidelines
- Format: Images to be exported as .jpgs or .pngs (when transparent; always use png-24 when given the option) as specified throughout the guide
- dpi/ppi: Images to be exported at 72 dpi/ppi
- File Size: Exported images should be under 1mb; scale down the quality of .jpgs to 80%/”good” quality to help reduce file size (without reducing image size)
- SVGs: Pure vectors can be used on the site! We’ll need text converted to outlines and then in Illustrator, instead of export, choose Save As and then check off Include XMP in the export settings (cloudup.com/cySmeKfiX64). Or the following bit of code can be pasted before all of the SVG markup: <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
- All images should include alt text for optimal accessibility for those using screen readers
Color Reference
Here is the link to view the shared XD style library where you can find the color palette that is being used on the website.
- #172c34 = Black
- #c1baae = Gray
- #1876ba = Blue
- #e7f1f8 = Light Blue
- #d12b44 = Red
- #2e8731 = Green
- #ffd700 = Yellow
Class Library
Class
display-column-space-between
Description
Used to equalize buttons within columns
Type Styles
When adding in type styles, select the type and adjust the style from paragraph or heading as needed. From there, you can make sizing adjustments in the right hand panel under Typography / Size to assign an extra large, large, small or eyebrow classes to it.
This is a Large h1, used strictly on the homepage hero.
This subheading text is a paragraph with XL sizing, often seen below the h1 in the hero. We aren’t really using this XL size anywhere else.
This is an h1, each page should have a single h1 (ie. title).
This subheading text is a paragraph with XL sizing, often seen below the h1 in the hero. We aren’t really using this XL size anywhere else.
This is an h2, used to break up sections within a page.
This subheading is a paragraph with L sizing, often seen below an h2 as a brief subheading.
This is an h3, used to call out a section within a larger section of a given page.
We’re also using the h3 on cover block CTAs (see below), with the large paragraph below for supporting copy.
This is an h4, used as smaller header styles and labels throughout.
We typically see a large paragraph under an h4.
Followed by a paragraph. (see vertical tabbed drawers below)
This is an h5, used for post titles within thumbnails.
This is an h6.
There is a paragraph large style that can be used as a lead in above a standard paragraph style/body of copy. It’s also used as a subheading style as noted above, below specific heading styles.
This is a typical paragraph used for body copy/blocks of copy.
This is a small paragraph, used for smaller footnotes, captions, or other subtle content.
This is an “eyebrow”, used as a pre-header or label. Paragraph type with the M/Medium “Eyebrow” style applied, here we have the eyebrow shown in gray. This is usually only a word or two long, and not a whole paragraph.
Homepage Hero
Intended Use
This block is for the homepage hero area.
Background Imagery
The background feather texture is already in the media library and ready for use. No overlay is needed as the overlay has been included in the image asset. If you’d like to swap out the background image for different slides, follow the guidelines below:
Image Specs
Recommended Dimensions: 1920px x 1080px
Save for Web as a .jpg
Note: The image will be automatically cropped/masked in the bottom right corner; Do not include any masking or rounded corners in the image export.
Block Editor Settings
Depending on the background image, you may need to adjust two settings:
- Styles > Color > Overlay: You can adjust the overlay color and opacity as needed to ensure the text is legible over the background image.
- Media Settings > Focal Point Picker: This allows you to position the background image responsively if there is an area that should remain in view as the browser scales down.
Foreground Imagery
Image Specs
Recommended Dimensions: 1200px x 1024px
Save for Web as a transparent .png
Note: The image will be placed over the background image/feather texture, with some imagery overlapping the white space seen in the bottom right. For this reason, it is critical that the image has a transparent background and is exported as a transparent .png.
Block Editor Settings
Once the image has been uploaded and placed within the block, select the image to confirm the dimensions in the right hand sidebar within the Image Settings panel. The system will resize it as needed, but the size should be set to Large / 100%, auto resized at 1024px x 874px.
We are passionate bird people.
Globally supporting the avian community—veterinarians, breeders, rescues, wild parrot conservation, and pet parents.
Grouped PDP Hero
Intended Use
This block is used as the hero imagery block across grouped PDP and sub-category pages.
Image Specs
Background: The background feather texture is already in the media library and ready for use. No overlay is needed as the overlay has been included in the image asset.
Foreground Imagery
Recommended Dimensions: 700 x 1200px
Save for Web as .jpg
Note: The image will be automatically cropped/scaled responsively from the center. Try to keep subject matter in the center of the image. Do not include any masking or rounded corners in the image export.
Block Editor Settings
Once the image has been uploaded and placed within the block, select the image to confirm the dimensions in the right hand sidebar within the Image Settings panel. The system will resize it as needed, but the size should be set to Large / 100%, auto resized at 1024px x 597px.
Pattern
This block is a pattern that can be easily added into a brand new page. Once added the copy and, background, and foreground images can all be updated. The name of this block pattern is Banner Half Image.
High Performance Formula
Tropican High Performance Formula provides proper daily nutrition for weaning, fledgling and breeding Parrots or for Parrots that require a heartier diet.
Grouped PDP Icon Band
Intended Use
This block is used as way to highlight product features.
Image Specs
Foreground Imagery
Recommended Dimensions: 240 x 240
Save for Web as .png
Promotes Feather & Muscle Development
Natural Omega Fatty Acids from Flaxseed
Fortified with Vitamins & Minerals
Internal Page Hero
Intended Use
This block is used as the hero imagery block across internal pages.
Image Specs
Background: The background feather texture is already in the media library and ready for use. No overlay is needed as the overlay has been included in the image asset.
Foreground Imagery
Recommended Dimensions: 700 x 1200px
Save for Web as .jpg
Note: The image will be automatically cropped/scaled responsively from the center. Try to keep subject matter in the center of the image. Do not include any masking or rounded corners in the image export.
Block Editor Settings
Once the image has been uploaded and placed within the block, select the image to confirm the dimensions in the right hand sidebar within the Image Settings panel. The system will resize it as needed, but the size should be set to Large / 100%, auto resized at 1024px x 597px.
Pattern
This block is a pattern that can be easily added into a brand new page. Once added the copy and, background, and foreground images can all be updated. The name of this block pattern is Banner Half Image.
Meet Our Facility Manager
Josee Birmingham | AHT, HARI Facility Manager
Vertical Tabbed Drawers
Intended Use
This block is intended to be used to display tabbed content, revealing not only a description/text within the expandable tab but also an image on the right.
Image Specs
Recommended Dimensions: 1840px x 1200px
Save for Web as .jpg
Note: The image will be automatically cropped/scaled responsively from the center. Try to keep subject matter in the center of the image. Do not include rounded corners in the image export.
Block Editor Settings
This block is managed through the tabs post type. Each “tab” is a new post where the content and images can be added/edited. Once the tabs are created, navigate to the page you’d like to input them, and choose the Tab Accordion from the block library. From here, you’ll be able to select which tabs should display in this accordion by selecting their title/post name within the tab data.
Healthy Food
Meeting the dietary requirements of your pet bird doesn’t have to be difficult. To stay healthy pet birds need a balanced diet that has a high nutritional value with essential nutrients to meet their energy needs and to maintain vital body functions.
Enrichment Toys
Parrot Toys are not just for fun! It is important to offer safe, quality toys to pet birds as an outlet to encourage natural bird behaviours.
Perfect Perches
Bird perches are essential for companion birds and they serve multiple purposes, including providing a place to stand, play games, groom, and sleep comfortably at night.
Dietary Supplements
Supplements can bridge the gap so that birds maintain the proper balance of nutrients from a healthy diet and vitamin and mineral supplementation.
Tasty Treats
Who doesn’t love a treat? One of the most effective ways to teach a bird new behaviors or tricks and skills is by using a reinforcer such as an irresistible food treat to motivate them.
Cover Block CTA
Intended Use
This block is intended to display large photography paired with a relevant headline, subhead, and button (if applicable). Used on Product Detail pages (PDPs) as well as other areas throughout the site.
Image Specs
Recommended Dimensions: 1920px x 850px
Save for Web as .jpg
Block Editor Settings
We have the minimum height set to 650px to avoid cropping critical parts of the image responsively. This can be managed in the right hand panel under Minimum Height of Cover. We suggest keeping this at 600-800px.
Be sure to adjust the focal point in the right hand panel so the image scales according to critical parts of the image.
You can easily swap the content block from the left to the right by swapping the order of the columns in the left hand list view panel of layers (see example below).
Tropican High Performance Formula
Premium Parrot Food with Higher Nutrient Levels
Tropican High Performance Formula
Premium Parrot Food with Higher Nutrient Levels
Resource CTAs
Intended Use
This block pattern is used on PDPs to highlight three relevant resources.
Iconography Specs
See icon template here. These icons have a consistent $gray circle behind them; the iconography itself is a combination of fills and strokes, with the HARI $yellow and $red as accent colors.
All elements of the iconography should be outlined as “fills” and not include any strokes as strokes will scale disproportionately. Use the pathfinder tool to combine elements together as needed.
Save each artboard as an .svg file, including any white space around the circle.
Weight Chart
Calculate the amount of food to feed your parrot.
Conversion Guide
There are many methods to convert parrots to a new diet.
Feeding Guide
Learn more about feeding and nutrition.
Learn More Grid
Updated these to be perfectly square, and did not include rounded corners in export. Will need dev to mask the corners like we’re doing elsewhere.
Intended Use
This block pattern is used on PDPs to highlight ancillary content and beautiful photographs.
Imagery Specs
Recommended Dimensions: 600px x 600pxx
Save for Web as .jpg
Note: The image will be automatically cropped/scaled responsively from the center. Try to keep subject matter in the center of the image. Do not include rounded corners in the image export.
Proudly Canadian Made
Our 3-Step Quality Control Process
Learn More About Feeding & Nutrition
Feeding Research Paper
50/50 Imagery Within Posts
Intended Use
This 50/50 image row is used within the species post pages, but could also be used within blog/article posts.
Block Editor Settings
Under the image settings, we’ve kept the image size set to full size here.
Imagery Specs
Recommended Dimensions: 600px x 600pxx
Save for Web as .jpg
Note: The dimensions here could fluctuate, but we recommend keeping the imagery at a consistent height to ensure the images will equalize. A consistent height and width will allow the images to be in a 50/50 grid structure.
Archive & Post Featured Image
Intended Use
Beautiful featured imagery for Avian Care articles, Charts, and Events.
Image Specs
Recommended Dimensions: 1656 × 987px
Save for Web as .jpg
Note: The image will be automatically cropped/scaled responsively from the center. Try to keep subject matter in the center of the image. Do not include rounded corners in the image export.
You May Also Like Block
You May Also Like…
Avian Care Video Embed or Image Layout Grid Block
Intended Use
This block structure can be used within Avian Care articles to add in media and break the centered content column, giving visual interest to the page structure.
Block Pattern Notes
This pattern uses the Layout Grid, one column and either a YouTube embed block or an image block (other blocks can be used here but we’ll stick with these two for now). And then the layout grid is pulled in 2columns to give it that slight out of column look alongside the center content of the article.
Popular Posts
Avian Care 2Col with Product Category CTA (Old)
Join Our Avian Social Communities!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Where to Buy
Table Options
They are wide on the front-end because they are not in a slim container as you see them on Avian Care posts
Flexible Table Block:
| Test Header 1 | Test Header 2 | Test Header 3 |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Standard Table Block:
CSS Styles:
- is-style-stripes – Adds zebra stripe style
- hide-for-tablet – Hides table on smaller screens
- table-custom-style –
- is-style-default –
Mobile Slider Option (only visible on smaller screens):
Can use CSS class of show-for-tablet so it only shows for smaller screens.