PATTERN: school-photo
SIZES: Default (110px) · sm (90px) · lg (150px)
OVERLAYS: school-photo-badge (top-left) · school-photo-bookmark (top-right)
110px-tall rounded cover-photo block for school and provider cards. Falls back
to a sky-gradient when no image is available. Supports an absolute-positioned
badge overlay (top-left) and a bookmark overlay (top-right). Caller drops
either an <img> or leaves the block empty for the gradient fallback.
1. Default — sky gradient fallback
No image, no overlays: The sky gradient (#ACCCF8 → #CCECFF)
is the CSS background fallback. No child elements needed.
<div class="school-photo"></div>
2. With badge (top-left) and bookmark (top-right)
Overlays: A school-photo-badge sits at top-left
(absolute 8px/8px). A school-photo-bookmark sits at top-right
(absolute 6px/6px). The badge uses the existing ofsted-tag
component; the bookmark is a raw FA icon.
<div class="school-photo">
<div class="school-photo-badge"><span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span></div>
<div class="school-photo-bookmark"><i class="fa-solid fa-bookmark" aria-label="Saved" role="img"></i></div>
</div>
3. Small variant (90px)
school-photo-sm: Reduces height to 90px. Used in compact school-card variants where vertical space is tight.
<div class="school-photo school-photo-sm"></div>
4. Large variant (150px)
school-photo-lg: Increases height to 150px. Used on school detail/profile pages where the cover photo is more prominent.
<div class="school-photo school-photo-lg"></div>
5. With a photo via <img>
With image: Drop an <img> inside the wrapper.
The school-photo img rule applies object-cover
to fill the frame. The gradient background remains as a loading fallback while
the image loads.
<div class="school-photo school-photo-lg">
<img src="..." alt="School campus">
<div class="school-photo-badge">...</div>
<div class="school-photo-bookmark">...</div>
</div>
Size comparison
sm (90px)
default (110px)
lg (150px)