ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
Component Library
2
Agility Components
3
Component NameStepperFeatured ArticlesWide Image with VideoRelated ArticlesHomepage HeroRound Banner with ButtonRecently Uploaded Pets CarouselLarge Image with HeaderGlobal - Shelter MapImage with Card CalloutArticle CarouselPage HeaderFrequently Asked QuestionsGlobal - Shelter ListReunion Stories Carousel
4
Component DescriptionStepper list with icons, step titles, and descriptions.1 featured card on left and up to 3 stacked cards on right. Custom select which articles to feature.Full width video with two buttons: one link and one to watch video (video plays in module when clicked).Stacked cards (up to 3) listing related articles by category. Includes image + title, author, description, and link.Homepage hero with image on left/right. Cards with "I lost/found a pet" under title or "My Pets" carousel (logged in users).Round CTA banner with customizable icon + text on left and button on right.Carousel with one row of cards (4 across) showing most recent pets uploaded.1:1 or 16:9 image on left/right. Header + subheader + optional button on left/right.Image with map of shelters on right and shelter statistics on left with "View Shelters" button.Image on left/right. Header + subheader + optional button in colored square background.Carousel with custom selected featured articles. Image on right and article info on left.Full width page header with colored background and up to 2 optional buttons.Accordion list with collapsable questions and answers.Shelter map image with cards (3 across) showing shelter info. Carousel with quotes from reunion stories (3 across) and full width color background.
5
Figma Link (w/ variations + design/dev notes)Stepper (Figma)Featured Articles (Figma)Wide Image with Video (Figma)Related Articles (Figma)Homepage Hero (Figma)Round Banner with Button (Figma)
6
Agility LinkStepper (Agility)Featured Articles (Agility)Wide Image With Video (Agility)Related Articles (Agility)Homepage Hero (Agility)Round Banner with Button (Agility)
7
CommentsIf you haven't selected any articles, this component will dynamically pull the latest 3 articles from the given category of the article.
8
9
Non-Agility Components
10
Component NameRelated Articles Index with SearchPet List by ShelterResources - DashboardMy Pets - Dashboard
11
Figma LinkRelated Articles Index with Search (Figma)Pet List by Shelter (Figma)Resources - Dashboard (Figma)My Pets - Dashboard (Figma)
12
Where does the component live (system, app, etc.)?This lives within the Application.This lives with the Application.This lives within the Application.This lives within the Application.
13
Who is the point of contact for help?Elijah LondonElijah LondonElijah LondonElijah London
14
How do we edit/request edits?Jira TicketsJira TicketsJira TicketsJira Tickets
15
Why is this hosted off Agility?It contains alot of search logic related to the back and forth between pages and pagination.This data is fed in from the Lost backend for each shelter.The Articles are hosted within Agility. It just displays dynamically.Dashboard Pages are powered by our Lost backend for the content.
16
Is this migrating to Agility? (yes/no)NoNoNoNo
17
Comments
18
19
Single Content Models (global across Lost.PetcoLove.org)
20
Content Model NameGlobal - Main NavigationGlobal - FooterGlobal - Top NavBarGlobal - Shelter Map
21
Figma Link (w/ variations + design/dev notes)Global - Main Navigation (Figma)Global - Footer (Figma)Top Navigation (Figma)Global - Shelter Map (Figma)
22
Agility LinkNavBar (Agility)Footer (Agility)Top Navbar (Agility)Global - Shelter Map (Agility)
23
Content Model DescriptionTop navigation bar across all pages with landing page links.Bottom footer area across all pages with landing page links.Top nav area across all pages with subdomain + landing page links.Image with map of shelters on right and shelter statistics on left with "View Shelters" button.
24
Comments
25
26
Naming Convention
27
Global or leave blank if non-global - Content Type + Component Design - Dashboard or blank if not on dashboard
28
29
Other notes
30
Local Link: Add "~" (ex. ~/lost-pet-101)
31
All icons are Font Awesome icons. To insert an icon, find its name in the Font Awesome Gallery, and copy/paste the name (ex. fa fa-home-heart) into the Agility field where you're replacing/adding the icon.Font Awesome Icon Gallery
32
Global = A component that's global across one Agility instance (Petco Love Lost, PetcoLove.org, etc.). When we add the component to multiple pages, changing one element (like the header) will reflect across all pages in the instance.
33
In Agility, components are called "Modules".
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100