Photo Button

Photo buttons are used as visual navigation to provide the user with a quickly scannable cues for the link destination.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select example

<a class="button-photo" href="https://www.uoregon.edu/">
  <div class="button-photo__photo">
    <img src="/test-image-landscape.jpg" alt="Test Image" />
  </div>
  <span class="button-photo__caption">Photo Caption</span>
</a>

Open Full Example

<a class="button-photo button-photo--noshade" href="https://www.uoregon.edu/">
  <div class="button-photo__photo">
    <img src="/test-image-landscape.jpg" alt="Test Image" />
  </div>
  <span class="button-photo__caption">Photo Caption</span>
</a>

Open Full Example

<a class="button-photo button-photo--shade" href="https://www.uoregon.edu/">
  <div class="button-photo__photo">
    <img src="/test-image-landscape.jpg" alt="Test Image" />
  </div>
  <span class="button-photo__caption">Photo Caption</span>
</a>

Usage

Photo buttons should be used in a group (often in a grid) as navigation to linked content that shares a common theme, and also can be identified visually. They should always include a link, photo, and link text.

Guidance

When to Use Photo Buttons

When several grouped links have clear imagery: When images can aid in quickly identifying a links function, it makes the navigation more scannable.

When to Consider Another Component

When you have more than 6 links: Use a resource listing or other navigation component in these cases.
When there is no clear photo that matches: Use a call to action button or a resource listing when the links don’t lend themselves to visuals.

Usage Guidance

Keep consistent styles: Use the same photo button style for a set of buttons.
Avoid long text: Sentences or long text strings may not display correctly on small photos and obscure the photo.
Avoid bright white images: Bright white images may make the text contrast insufficient for accessibility and legibility.

Accessibility Guidance

Ensure the image provides proper contrast for text: Using very light-colored images or visually complex images may make the text hard to read or result in less than required color contrast.

Elements

Element	Description	Usage	Required	Multiple
Photo	The button’s photo	Pick a photo that conveys the meaning of the link	Yes	No
Caption	The text of the link	Use short, clear text that is 1-3 words	Yes	No

Styles

Classname	Effect	Reason to Use
(Default, no style class)	Gradient over text at bottom	Use for most cases
`button-photo--shade`	Box shadow over text, centered on image	Use when the default gradient contrast is not sufficient
`button-photo--noshade`	Text centered on image, no shadow or gradient	Use when the photos are very dark and do not need a shade