Contact cards: a look at how we are using the component
This page gathers examples of the Contact Links component as it now appears on the migrated Benioff Children's pages. Every card below is a live migrated card, pulled in from the page it belongs to. Nothing here is a mock-up, and no new cards were created for this page.
We built this because the reviewers are right to ask about it. The component looks designed for a heading and a phone number. The legacy content asked it to carry more: across the migrated pages there are 125 contact-card groups on 94 pages, holding six kinds of links (phone, email, fax, schedule, address text and title lines) in 21 different combinations, and the busiest single card carries nine links. That is very likely why some addresses run together on one line.
Below are 22 examples chosen to cover every shape we found. Each one says how many of the 125 groups share its shape, so it is clear which are common and which are one-offs. They run from the most crowded card to the simplest.
The question we would like your help with: where should the limits of this component sit, and what should we do with the content that does not fit inside them? Thank you for taking a look.
Assembled for the Sprint 1 UAT review. Related ticket: BM2-245.
1. International Services Zh
Card heading: 如何联络我们
What to notice: 2 cards; 9 links on the busiest card; link types: Email, Fax, Phone, Text, Title
How common: this shape covers 2 of the 125 contact-card groups on the new site (also on: international services).
如何联络我们
电话、传真和电子邮件
邮寄地址
对于商业承运人交付地址（联邦快递，UPS，DHL等):
UCSF国际服务部1500 Owens St., Suite 360San Francisco, CA 94158
对于美国邮政服务（U.S. Postal Service）交付地址：
UCSF国际服务部Campus Box 06271500 Owens St., Suite 360
San Francisco, CA 94143
2. Request A Consultation
Card heading: (no heading)
What to notice: 2 cards; 7 links on the busiest card; link types: Phone, Text; no container heading (it continues the container above it on its own page)
How common: this shape covers 4 of the 125 contact-card groups on the new site (also on: quality, off site accommodations near ucsf benioff childrens hospital oakland, off site accommodations near ucsf benioff childrens hospital oakland).
San Francisco Critical Care Consultations
Oakland Critical Care Consultations
3. Help Paying Your Bill
Card heading: Patient Financial Services
What to notice: 1 card; 6 links on the busiest card; link types: Email, Fax, Phone, Schedule, Text
How common: this shape covers 3 of the 125 contact-card groups on the new site (also on: patient relations, billing and insurance).
Patient Financial Services
Los Angeles, CA 90088-5631
4. Contact A Patient
Card heading: (no heading)
What to notice: 2 cards; 6 links on the busiest card; link types: Text; no container heading (it continues the container above it on its own page)
How common: this shape covers 1 of the 125 contact-card groups on the new site.
San Francisco
1975 Fourth St.
San Francisco, CA 94158-2351Note: Please write "patient mail" on the lower right corner of the envelope.
Oakland
747 52nd St.
Oakland, CA 94609
5. Family Resource Center
Card heading: Locations & hours
What to notice: 2 cards; 6 links on the busiest card; link types: Phone, Schedule, Text, Title
How common: this shape covers 1 of the 125 contact-card groups on the new site.
Location & hours
UCSF Benioff Children's Hospital Oakland
Family Resource Center (FRC)
Oakland Outpatient Center744 52nd St., First Floor, Room 1600
Oakland, CA 94609Phone: 510-428-3549
Closed weekends
6. Child Life
Card heading: Contact us
What to notice: 3 cards; 5 links on the busiest card; link types: Email, Phone, Text, Title
How common: this shape covers 2 of the 125 contact-card groups on the new site (also on: food services).
Contact us
Oakland
Walnut Creek
San Francisco
Child Life, Creative Arts Therapies, Education and Family Services
1975 Fourth St.San Francisco, CA 94158Phone: 415-353-1203childlifeservices@ucsf.edu
7. Playsafe Sports Medicine Outreach Program
Card heading: Contact us
What to notice: 1 card; 4 links on the busiest card; link types: Email, Fax, Phone, Text
How common: this shape covers 5 of the 125 contact-card groups on the new site (also on: champs, child life pre internship experiences, child life internship, and more).
Contact us
UCSF Sports Medicine Center
8. Physician Liaison Service
Card heading: Contact us
What to notice: 1 card; 4 links on the busiest card; link types: Email, Fax, Phone, Schedule
How common: this shape covers 1 of the 125 contact-card groups on the new site.
Contact us
Physician Liaison Service
9. Medical Staff Office Ucsf Benioff Childrens Hospital Oakland
Card heading: Contact us
What to notice: 2 cards; 4 links on the busiest card; link types: Email, Phone, Schedule, Text
How common: this shape covers 2 of the 125 contact-card groups on the new site (also on: glossary).
Contact us
Medical Staff Office
Medical Staff Office Hospital Annex
10. Food Services
Card heading: (no heading)
What to notice: 2 cards; 4 links on the busiest card; link types: Schedule, Text, Title; no container heading (it continues the container above it on its own page)
How common: this shape covers 2 of the 125 contact-card groups on the new site (also on: school program).
Friendly Café (Oakland)
UCSF Benioff Children's Hospital Oakland
747 52nd St., Second FloorSat-Sun: 7:30 - 10 a.m. | 11:30 a.m. - 2 p.m. | 4:30 - 7 p.m.
Espresso Café (Oakland)
Oakland Outpatient Center
744 52nd St., First Floor11. Physician Contact Directory (Oakland)
Card heading: the department name, for example Diagnostic Imaging or Emergency Department
What to notice: this is a physician directory, not a contact block. Each card carries a department as its heading, a doctor's name as plain text, then a phone number and an email address. The page holds 51 of these cards (47 with a doctor's name on them), and because the component shows at most three cards at a time they are split across 18 separate stacked groups, only the first of which has a heading. The page opens with the main hospital switchboard number and then runs the department list.
How common: these 18 of the 125 contact-card groups are all this one page. No other page uses the component this way.
Please note: Jessica Auerbach has said it is fine to delete this page, so it does not need a redesign. We are showing it because it is the clearest example of content that the contact card was never meant to hold.
Urgent Care
Infectious Diseases
Urology
12. Visiting Hours And Guidelines
Card heading: Check-in desks
What to notice: 2 cards; 3 links on the busiest card; link types: Phone, Schedule, Text
How common: this shape covers 5 of the 125 contact-card groups on the new site (also on: patient safety how you can help, gift shops, help paying your bill, and more).
Check-in desks
Information desk (San Francisco)
Ambassador's desk (Oakland) (or ext. 3474 from inside the hospital)
Oakland, CA
13. Social Services
Card heading: To contact social services
What to notice: 2 cards; 3 links on the busiest card; link types: Fax, Phone, Schedule
How common: this shape covers 1 of the 125 contact-card groups on the new site.
To contact social services
San Francisco
Oakland
14. Parent Support Program
Card heading: Contact us
What to notice: 1 card; 3 links on the busiest card; link types: Fax, Phone, Text
How common: this shape covers 9 of the 125 contact-card groups on the new site (also on: find, surgical site infections, hospital acquired pressure injuries, and more).
Contact us
Parent Support Program
Room C 6421
San Francisco, CA 94158
15. Surgical Site Infections
Card heading: Contact us
What to notice: 3 cards; 2 links on the busiest card; link types: Phone, Text
How common: this shape covers 9 of the 125 contact-card groups on the new site (also on: hospital acquired pressure injuries, hand hygiene, fall prevention, and more).
Contact us
Patient Safety & Quality, San Francisco
Patient Safety Hotline, San Francisco
Patient Relations, San Francisco
16. Finding A Headache Psychologist Es
Card heading: (no heading)
What to notice: 2 cards; 2 links on the busiest card; link types: Email, Phone; no container heading (it continues the container above it on its own page)
How common: this shape covers 5 of the 125 contact-card groups on the new site (also on: finding a headache psychologist, patient safety how you can help, san francisco, and more).
Desiree Dieste, LCSW
Tiffany Raffino, LCSW
17. Transfer Or Transport A Patient
Card heading: Contact us
What to notice: 2 cards; 2 links on the busiest card; link types: Fax, Phone
How common: this shape covers 4 of the 125 contact-card groups on the new site (also on: request a consultation, pediatric emergency medicine clinical pathways, direct admissions to ucsf benioff childrens hospital oakland).
Contact us
Pediatric Access Center Oakland
Pediatric Access Center San Francisco
18. Family Advisory Council
Card heading: Contact us
What to notice: 2 cards; 2 links on the busiest card; link types: Email, Text
How common: this shape covers 4 of the 125 contact-card groups on the new site (also on: pediatric emergency medicine clinical pathways, child life internship, camp winning hands).
Contact us
Family Advisory Council, San Francisco
Family Advisory Council, Oakland
19. Medical Records
Card heading: Send to:
What to notice: 1 card; 2 links on the busiest card; link types: Fax, Text; inline variant
How common: this shape covers 7 of the 125 contact-card groups on the new site (also on: clinical trial treats sickle cell disease with crispr, become a volunteer, refer a patient, and more).
Send to San Francisco:
Health Information Management
400 Parnassus Ave., Room A88
San Francisco, CA 94143-0308
20. Cancer Clinical Trials
Card heading: Providers
What to notice: 2 cards; 1 link on the busiest card; link types: Phone; inline variant
How common: this shape covers 36 of the 125 contact-card groups on the new site (also on: myelodysplastic syndromes, fetal bowel obstruction, gastroschisis, and more).
Providers
San Francisco
Oakland
21. Refer A Patient
Card heading: 3. Send materials to us:
What to notice: 2 cards; 1 link on the busiest card; link types: Fax; inline variant
How common: this shape covers 1 of the 125 contact-card groups on the new site.
22. Child Life Pre Internship Experiences
Card heading: Contact us
What to notice: 1 card; 1 link on the busiest card; link types: Email
How common: this shape covers 3 of the 125 contact-card groups on the new site (also on: hospital based youth violence intervention program, hearts at home).