Student Testimony
Pavo Real - Student Testimony - Full Width
Program Page 25 - Student Testimony Lorem ipsum dolor sit amet, 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.
First Last
State or Countries
Component Details
Component Name: Pavo Real - Student Testimony - Full Width
One student, one quotation. A circular portrait overlapping a navy panel that carries the quote, the student name and where they are from.
What it is
A single testimony, not a list. The quotation sits in a deep navy band with oversized decorative quote marks drawn at its top left and bottom right corners, and a hairline rule separating the quote from the attribution beneath it. The portrait is cropped to a circle and pulled up out of the band: centred above it on a phone, and parked against the right edge at tablet width and up.
The fields
- Image — the portrait. It displays at 210 x 210 and is masked to a circle, so upload a square image, ideally 420 x 420 so it stays sharp on a retina screen. A rectangular photo is scaled to the width of the circle and whatever falls below it is cut off, which crops heads oddly; crop to a square with the face centred before uploading.
- Image description — alt text for the portrait. Name the person: Portrait of Ebony Clark. Some existing instances still carry the placeholder word from the sample data, which tells a screen reader nothing.
- Quote — the testimony itself. Do not type quotation marks around it; the large marks in the corners are drawn by the design and a typed pair reads as doubled. Three or four sentences is the comfortable length — the type is set large and a long quote pushes the panel past a screen height.
- Name — the student, printed under the rule.
- Home state or country — the line under the name.
One field does nothing — leave it empty
The form offers a further field for the college or program, holding College of Business in the example above. It is never printed. Three separate published instances were checked, including a real testimony on the program page guide, and every one publishes an empty line where it would go. Anything typed into it is invisible to the reader, so put the college in the quote or in the surrounding copy instead and treat that field as out of service until it is fixed.
Good for
A single strong voice: one graduate on a program page, one student on a department landing page. For several testimonies, place several of these rather than looking for a carousel — each one is a separate component.
Notable
- The component reserves a wide margin above itself so the portrait has room to overhang. It will look like a gap in the CMS editor; that space is deliberate, so do not add more above it.
- The portrait is decorative in layout terms but it is a real photograph of a real person, so the alt text matters. It is the only accessible description of who is speaking.
- Quote marks, rule and portrait crop are all fixed by the design. The only things you control are the five fields above.