Banner

Used to call out important text — primarily on the home page and landing pages.

Button is optional 

If “Call to Action” field is left blank, no button will display

Bold and regular mixed font weight is acceptable for needed emphasis


Banner background types:

Photo — uploaded image will be stretched to fit screen width (select focal point for mobile)
Tile — uploaded image will repeat across banner area (if transparent, background color will show through)
Color — solid color background in either Buff, Light Grey, Dark Slate, Orange, or White


Note: If using a photo, choose Dark Slate background in order for text to appear as white.
If using a transparent tile, the background color chosen will show through.
 
 
 
Banner examples:

Body

Standard body field used on custom pages. (Commonly used after headline paragraph.)

Content width:
Options are small, medium, and large. Small is standard width for copy that is more than a sentence or two. Use large and medium widths for special cases. Stories are limited to medium and small content widths only. 

Text alignment:
Text can be aligned left or centered. *Only use center alignment in cases where text is limited and will not be more than 3 lines. (Text is always left aligned on mobile, even if center is chosen for desktop users.)

Body background types:

Photo — uploaded image will be stretched to fit screen width (select focal point for mobile)
Tile — uploaded image will repeat across screen width
Color — solid color background in either Buff, Light Grey, Dark Slate, or White


Note: If using a photo, choose Dark Slate background in order for text to appear as white. If using a transparent tile, the background color chosen will show through.
 
 
 
Body examples:

 

It’s the story of Best Friends, but it’s much more than the history of a spot on the map. This group of ordinary but passionate people believed that every pet has a story, too, each one worth saving, each life individual and important. Today, nearly four decades after they broke ground for a sanctuary in a remote region of the Southwest, achieving no-kill across the entire country is within reach.

 

Let’s be friends! 

Connect with us on social media to stay in the loop about the lifesaving progress we’re making together.  
 

Facebook logo    Instagram logo    icon

 

Cat HQ  

Cat World Headquarters is where volunteers get assignments, ranging from taking cats for walks in strollers or on harnesses to helping with clicker training to cleaning and general caregiving. Cat HQ features 20 rooms and caters to cats who prefer to live alone or in small groups of two or three. A few rooms are set aside for kittens. 

 

 

 

Cat HQ  

Cat World Headquarters is where volunteers get assignments, ranging from taking cats for walks in strollers or on harnesses to helping with clicker training to cleaning and general caregiving. Cat HQ features 20 rooms and caters to cats who prefer to live alone or in small groups of two or three. A few rooms are set aside for kittens. 

 

 


Call to Action

Used to feature specific content with user action.

The call to action paragraph height is fixed. Choose Full, Large, or Medium width. Ratios of image to the text panel are either 50:50 or 40:60.  Image can appear on either left or right of text. (Default is image on left. Use checkbox to switch image to right.) 

Image and headline are required. (Headlines have a 60 character limit. Body has 100 character limit.)

Body is optional. Text centers vertically within background color panel. Call to action (button or text link) is optional. Buttons should be used for calls to action like adopt, volunteer, and donate. Limit of 26 characters. Underlined links should be used for informational content such as features and blogs.
Text background color options are White, Light Grey, Buff, and Dark Slate


Note: If event dates are entered, the Call to Action Paragraph will hide once the event date has passed.
 
 
 
Call to Action examples:
Happy cat perched on a branch in a bright and sunny outdoor cat enclosure
Lorem ipsum dolor sit amet diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lectus in diam sodales fermentum. Vivamus commodo blandit nulla efficitur faucibus. Nam augue justo, laoreet sed elementum amet.
Happy cat perched on a branch in a bright and sunny outdoor cat enclosure
Lorem ipsum dolor sit amet diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lectus in diam sodales fermentum. Vivamus commodo blandit nulla efficitur faucibus. Nam augue justo, laoreet sed elementum amet.
Two blue colored birds sitting on a perch
Lorem ipsum dolor sit amet diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lectus in diam sodales fermentum. Vivamus commodo blandit nulla efficitur faucibus. Nam augue justo, laoreet sed elementum amet.
Happy cat perched on a branch in a bright and sunny outdoor cat enclosure
Lorem ipsum dolor sit amet diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lectus in diam sodales fermentum. Vivamus commodo blandit nulla efficitur faucibus. Nam augue justo, laoreet sed elementum amet.

FAQ

Used to add common questions to page.

Consists of a title, background color, and question/answer pairs. 

On desktop, displays in rows of 2.

Background color options are dark slate, light grey, buff, and white.

FAQ items are configured to populate Google FAQ schema.
 
 
 
FAQ examples:

Example FAQs

How many animals live at the Sanctuary?

The Sanctuary is home on any given day to around 1,600 animals, many of whom have special needs. Most of the animals are dogs and cats; the rest are horses, birds, rabbits, potbellied pigs, and an assortment of other animals.

Where do the animals come from?

Most of the animals come from Best Friends Network partners, which are located all around the country.

What is a "no-kill" sanctuary?

It's a sanctuary for homeless pets where animals are able to stay for as long as it takes them to find loving homes. Animals may still be euthanized humanely if they are irredeemably sick or injured, but they are not killed in order to make space for more animals.

What happens to the animals who are brought there?

Most of them are soon ready to go to good homes with loving families, making way for new arrivals. For the small number of animals who are never ready for adoption, the Sanctuary is their home for life.

Example FAQs

How many animals live at the Sanctuary?

The Sanctuary is home on any given day to around 1,600 animals, many of whom have special needs. Most of the animals are dogs and cats; the rest are horses, birds, rabbits, potbellied pigs, and an assortment of other animals.

Where do the animals come from?

Most of the animals come from Best Friends Network partners, which are located all around the country.

What is a "no-kill" sanctuary?

It's a sanctuary for homeless pets where animals are able to stay for as long as it takes them to find loving homes. Animals may still be euthanized humanely if they are irredeemably sick or injured, but they are not killed in order to make space for more animals.

What happens to the animals who are brought there?

Most of them are soon ready to go to good homes with loving families, making way for new arrivals. For the small number of animals who are never ready for adoption, the Sanctuary is their home for life.


Feature Cards (Box)

Use to highlight stories and other featured content.

Option for rectangular or square card images. 

Rectangle cards are displayed in rows of three. Square cards can be displayed in rows of three or four.

Ideal title length is limited to 2 lines. Descriptions should not be longer than 3-4 lines on desktop.

If using a YouTube video, the card can pop a video in a modal window.

Option to hide images on mobile.
 
 
 
Feature Cards (Box) examples:


Five Card with Feature

Primary Use: On home page and local programs landing pages to feature a set of key content pages. 
Notes:

  • The first card created will always be displayed as the feature card on desktop

Four Column Tile Banner

Used to highlight adoptions, donations, fostering, etc. — primarily used on the home page and landing pages.

Tiles need to be 4 across with a maximum of 2 rows high on desktop 

Number of tiles is optional for mobile (checkbox determines if a tile is viewable or hidden on mobile)


Tile styles:

Photo — a photo background with small link text in the bottom left corner of the tile (make sure photo is dark enough in the lower left corner for legibility)
Background Color — Dark slate or orange color background with white text and button (not available if photo is uploaded)


Note: : Avoid using background color tiles side-by-side — place a photo tile between color tiles.
Optional: Title field is used specifically for local pages to identify the city/location (for example, Los Angeles, New York, Salt Lake City, etc. Leave title field blank in other use cases.
 
 
 
Four Column Tile examples:
 
Los Angeles
New York
Salt Lake City


From Library

Primary Use: Reuse a paragraph on multiple pages.
Notes:

  • When a paragraph is created, it can be added to the paragraph library by clicking the kabob icon and selecting "Promote to Library"
  • Paragraphs promoted to the library can be selected and reused on other pages by selecting the "From Library" paragraph and selecting the desired paragraph.
  • To edit a paragraph in the Library go to Content > Paragraphs in the Admin menu
  • Editing a paragraph in the Library, edits it in ALL locations its being used
  • A paragraph from the Library can be used as a template by selecting the paragraph from the library, 
  • If a YouTube video is added, the card will pop up a video in a modal window
  • Users can add content using this paragraph to the Library to be reused on other pages
  • Edits to this paragraph in the Library will be reflected on all pages that use the saved version
  • Paragraphs from the Library can be used as a template by selecting them the "From the Library" paragraph on a page > clicking the kabab icon > selecting "unlink from library". Any edits made to the paragraph after that point will not affect the version in the Library


Headline

Primary Use: Can be used to add headlines above content
Notes:

  • Headline options are <H1> to <H4>
  • An option subhead with styles Subhead1 or Subhead2 are available
  • Headline is centered on desktop and left-aligned on mobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Hero - Card

Primary Use: Hero image for landing pages
Notes:

  • Has Headline and Subhead
  • Display is similar to a large Feature Card
  • Has optional video background option
  • If a video is added, the image will not display
  • Video should be used sparingly
Image
Close up of dog in front of Best Friends Location
Help animals and start saving lives in your community today!
Every day, in communities of all shapes and sizes, compassionate people just like you are saving the lives of pets. Collaborating locally is having a life-changing impact for pets across the country.


Hero - Dashboard

Primary Use: Initially designed for pet lifesaving dashboards pages, but is available as a hero on all custom pages.
Notes:

  • Desktop Image Size:
    • Standard - use for non-dashboard pages
    • Short - for no-kill dashboards
    • Tall - for rare cases only
  • Option to hide image on mobile.
  • Users can add a link to another page or a link that opens a modal window
  • If the modal window is used, users can add content via a body field and add a button that links to another page
  • Buttons should be used for calls to action like adopt, volunteer, and donate. Limit of 26 characters. Underlined links should be used for informational content such as features and blogs.The uploaded image will only show up on desktop
  • The subhead will display below the hero image on desktop
  • Do not use body and button fields if using the subhead
How is your community doing when it comes to lifesaving?
Every day, more than 950 cats and dogs are killed in our nation’s shelters because they don’t have safe places to call home. But people like you are changing that. View the data to find out how to help save more lives.
×

Doggo ipsum heckin good boys and girls most angery pupper I have ever seen sub woofer long woofer, smol. Very hand that feed shibe puggorino floofs much ruin diet you are doing me the shock, long woofer stop it fren. Borkf very good spot lotsa pats wrinkler smol, heckin good boys and girls thicc you are doing me a frighten snoot, adorable doggo heck heckin. heckin good boys and girls floofs h*ck. Noodle horse vvv boofers doge, fluffer. Borking doggo corgo shoob woofer ruff, very taste wow yapper bork. Big ol pupper the neighborhood pupper doge shooberino, heckin angery woofer much ruin diet.


Hero - Feature

Primary Use:  Primary Hero for Local Program landing pages
Notes:

  • Display is similar to Call to Action paragraph
  • Displays: image, headline, body (optional), and call to action (optional button).
  • Image can be on either left or right side (default is left) in a ratio of 50:50 or 40:60 to text.
  • Text panel background colors are:
    • Dark Slate
    • Orange
  • Text centers vertically within background color panel.
  • Height is fixed.
  • Buttons should be used for calls to action like adopt, volunteer, and donate. Limit of 26 characters. Underlined links should be used for informational content such as features and blogs.
Best Friends Animal Society
Doggo ipsum corgo you are doing me the shock much ruin
Tungg shooberino puggorino long water shoob long bois long woofer thicc, heckin good boys heckin aqua doggo doggo.


Hero - Primary

Primary Use: Used on home page only. 
Notes:

  • Separate desktop and mobile image (mobile image does not have text overlay.)
  • Displays: image, headline, and call to action button. Limit of 26 characters.
  • If a mobile image is not used, the desktop image will be cropped to fit mobile centered on the focal point selected
girl sitting with brown and white dog
brown and white dog with a young girl
Every purchase using the Best Friends credit card saves homeless pets.


Image

Primary Use: Display standalone images throughout the site
Notes:

  • Medium and small are the only options when used for Stories
  • Size options:
    • Full: Width is full. Height will flex based on aspect ratio
    • Large Tall: Uses large width with a fixed height
    • Large Short: Uses large width with a fixed height
    • Medium: Uses medium width with a fixed height
    • Small: Uses small width. Height will flex based on aspect ratio
Dolly the dog wearing a T-shirt
Courtesy of John and Carly Klanac


Impact Statement

Primary Use: Highlight org's values on the homepage
Notes:

  • This paragraph is currently used in groups of three
  • For use on the homepage only


Inverted Cards

Primary Use: To highlight services for our Local Programs
Notes:

  • Has optional Headline and background colors
  • Background colors: buff, light grey, dark slate, and white
  • Displays cards in rows of 4
  • Has optional Service Category. If you are using a Service category on any card, use them on all cards
  • The card Header has a character limit of 50
  • The card Body has a character limit of 100


Program Cards (Round)

Primary Use: Users to highlight available programs
Notes:

  • Displays round cards in rows of 3 or 4
  • Cards are displayed in order and can be reordered as needed
  • Do not use the YouTube video option when using round cards
  • Square images can be uploaded and will be adjusted to fit the round image styles


Spacer

Primary Use: Adjust spacing between paragraphs
Notes:

  • If two paragraphs do not have the desired spacing, a spacer paragraph can be used
  • Height is adjustable at increments of 1 REM (roughly 18px).
  • Has optional background colors:
    • Buff
    • Light Grey
    • Dark Slate
    • White


Subsection

Primary Use: Display header, body, button combo
Notes:

  • Has optional Icon field. When used, you must input the desired icon size at upload
  • Headline field can be an <H1> to <H3>
  • Subhead can use Subhead1 or Subhead 2 styles
  • Call to Action can be a button (small or large) or an underlined link
  • Has optional post body text if needed
  • Has optional background colors:
    • Buff
    • Light Grey
    • Dark Slate
    • White
Best Friends logo mark

Doggo ipsum fluffer length boy. he made many woofs dat tungg tho.

Pupperino blep heckin super chub h*ck noodle horse, vvv shoober heckin borkf. Pats you are doing me the shock vvv you are doing me a frighten wow very biscit heckin super chub shibe

Clouds heck boofers you are doing me a frighten thicc, big ol pupper smol. Such treat aqua doggo shibe puggo big ol pupper, doggo very good spot you are doin me a concern, blop yapper borking doggo. Heckin ur givin me a spook very taste wow shoob much ruin diet woofer, heckin angery woofer what a nice floof extremely cuuuuuute. Borkf lotsa pats corgo big ol pupper corgo shoober, ruff extremely cuuuuuute blop. puggo noodle horse floofs. Vvv borkdrive length boy, boof.

Shooberino borking doggo you are doing me a frighten yapper long water shoob blep he made many woofs adorable doggo, super chub very good spot lotsa pats ur givin me a spook long bois blop. Wow such tempt adorable doggo very hand that feed shibe you are doing me a frighten you are doin me a concern, heckin angery woofer boofers the neighborhood pupper doing me a frighten smol, big ol long bois extremely cuuuuuute. Heckin angery woofer clouds shooberino borkdrive I am bekom fat, pupperino blop waggy wags. Sub woofer corgo borkdrive I am bekom fat h*ck, length boy boof pupper, long bois shoob h*ck. Snoot borkf wow very biscit blop I am bekom fat, heckin shibe.


Tableau Visualization

Primary Use: To add a Tableau viz iFrame to a page
Notes:

  • If used standalone, the paragraph can be margined or full width
  • Users can input a desktop and mobile visualization to be used. If no mobile viz is added, the desktop will be used on mobile
  • Parameters can be added to a visualization. The primary use of parameters is to add filters.


View (Animal Lists)

Primary Use: Display location specific animals for the LP sections of the site
Notes:

  • The Animal Lists view can be added by adding the View paragraph to a page
  • Can display Adoptable Cats or Adoptable Dogs
  • To add to a page:
    • Step 1 – add View paragraph to page> select Animal Lists View Block > select Adoptable Cats or Adoptable Dogs Display Id
    • Step 2 – Find the IDs for the Adoption Location(s) you want to use by:
      Going to Structure > Taxonomy > Adoption Locations
    • Clicking the Edit button for the location(s) you want
    • Copy down the locations ID from the URL (/taxonomy/term/[numerical ID]/edit)
    • Step 3 – click OPTIONS on the View paragraph > add the Id for the desired Adoption Location
      NOTE: If you have more than one Location you want to use, add them with a “+” between them. (Example: 66448+66449)

42 Cats available for adoption


View (Conversion Ask)

Primary Use: Display conversion ask cards as a lard Call to Action or 4 small CTA cards
Notes:

  • The Conversion Ask view can be added by adding the View paragraph to a page
  • The cards displayed in this view are Conversion Ask media items. To create Conversion Asks:
    • Step 1a – if the Conversion Ask(s) has not been created go to Content > Media > Add media > Conversion Ask
    • Step 1b – add the Conversion Ask(s) with the appropriate category/categories
  • To add to a page:
    • Step 1 – add View paragraph to page> select Conversion Ask > Under View Block select Single for one large card or 4 Column for four small cards in a single row
    • Step 2 – Find the IDs for the Story Categories you want to use by:
      Going to Structure > Taxonomy > Story Categories
    • Clicking the Edit button for the Categories(s) you want
    • Copy down the Category ID from the URL (/taxonomy/term/[numerical ID]/edit)
    • Step 3 – click OPTIONS on the View paragraph > add the Id for the desired Story Categories
      NOTE: If you have more than one Category you want to use, you can add add them with a “+” or "," between them. (Example: 66369+484 or 66369, 484). Use the "+" if you want any story that has at least one Story Category. Use the "," if you only want stories that have ALL of the Story Categories
  • Conversion Ask cards are displayed in order based on the value in the cards weight field with the height weights getting priority. If the weights are the same, the most recently updated Conversion Ask will display.


View (Featured Stories)

Primary Use: Dynamically pull stories with Story Categories that match the pages content
Notes:

  • The Featured Stories view can be added by adding the View paragraph to a page
  • For the No-kill dashboards, select "Featured Stories + NP" to also pull in key pages from the Network Partners site
  • To add to a page:
    • Step 1 – add View paragraph to page> select Featured Stories View Block > select Featured Stories or Featured Stories + NP Display Id
    • Step 2 – Find the IDs for the Story Categories you want to use by:
      Going to Structure > Taxonomy > Story Categories
    • Clicking the Edit button for the Categories(s) you want
    • Copy down the Category ID from the URL (/taxonomy/term/[numerical ID]/edit)
    • Step 3 – click OPTIONS on the View paragraph > add the Id for the desired Story Categories
      NOTE: If you have more than one Category you want to use, you can add add them with a “+” or "," between them. (Example: 66369+484 or 66369, 484). Use the Featured Stories (OR) and "+" if you want any story that has at least one Story Category. Use the Featured Stories (AND) and "," if you only want stories that have ALL of the Story Categories
  • For a Story to be available for this View, the Story must have the "Generate Feature Card" checkbox checked.
  • For a Basic Page from the Network Partner site to be available, the page must have the "Generate Feature Card" checkbox checked.


View (Location Stories)

Primary Use: Dynamically pull Stories filtered by Location
Notes:

  • The Local Stories view can be added by adding the View paragraph to a page
  • To add to a page:
    • Step 1 – add View paragraph to page> select Location Stories View Block
    • Step 2 – Find the IDs for the Locations you want to use by:
      Going to Structure > Taxonomy > Location
    • Clicking the Edit button for the Location you want
    • Copy down the Location ID from the URL (/taxonomy/term/[numerical ID]/edit)
    • Step 3 – If you want to further filter by Story Category, repeat Step 2 using the Story Categories taxonomy
    • Step 4 – click OPTIONS on the View paragraph > add the Id for the desired Location
      NOTE: If you do not want to filter by a Story Category, add “/all” after the Location Id (Example: 66436/all) 
      NOTE: If you do want to filter by a Story Category, add “/[Story ID]” after the Location Id (Example: 66436/542) 
  • Filters added above the view are a body paragraph.


View (Network Partners)

Primary Use: Provide functionality to find nearby network partners on the state dashboards
Notes:

  • The Network Partners view can be added by adding the View paragraph to a page
  • Users can search by zipcode and the first 10 results will display.
  • Users can click a button to find more that will take them to our primary Network Partner search page with filter parameters preserved

Find a Best Friends Network partner near you

The Best Friends Network is made up of thousands of public and private shelters, rescue groups, spay/neuter organizations and other animal welfare groups, all working to save the lives of dogs and cats in communities like yours across the country.

Each and every one of our network partners needs caring people like you to adopt, foster, donate, volunteer and advocate to help save the lives of pets where you live.

Find a network partner near you today:
Units: Miles
Address, City, Zip-Code, Country, ...


Webform (action team signup)

Primary Use: Get users to signup for an action team on our national and state no-kill dashboards
Notes:

  • The action team signup form can be added by adding the Webform paragraph to a page
  • The description text can be edited for each instance of the paragraph that is used.
  • If this paragraph is used inside the 60:40 paragraph, the styles will be different.


Webform (Donation)

Primary Use: Make donating to Bestfriends easy by displaying donation options on our homepage 
Notes:

  • The Donation form can be added by adding the Webform paragraph to a page
  • The form allows for quick amount selections or a custom donation amount.

Give a lifesaving gift today.


YouTube Video

Primary Use: Embed a YouTube video on a custom page
Notes:

  • The embedded video will play within the frame on the page.
  • The size can be set to medium or small.
  • The paragraph is designed to be used next to a body paragraph