Skip to main content
Texas Design System

Photo Quote

Visual treatment of a quote or short statement with a large background photo. Supports Bottom, Right, and Left positions.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes
View full-width preview

Design Guidance
Required Body text
Optional Title, attribution
Limitations Title: 55 characters max · Body text: 600 characters max

Content Guidance

  • Title: Sentence case, no punctuation.
  • Body text: Sentence case, with punctuation.

Photo on Top, Quote Below (Bottom)

Texas Capitol building

Texas geography overview

Texas is a large geographic area characterized by various landforms and climate patterns. The terrain includes plains, hills, and coastal regions. It contains a network of infrastructure, such as highways and bridges, that spans the distance between different map coordinates. The state's boundaries encompass a significant amount of square mileage.

— TDOA Spokesperson

View HTML 
<div class="txds-photo-quote txds-photo-quote--bottom">
  <div class="txds-photo-quote__photo">
    <img src="/assets/images/photos/building.png" alt="Texas Capitol building">
  </div>
  <div class="txds-photo-quote__quote">
    <h3 class="txds-photo-quote__title">Texas geography overview</h3>
    <p class="txds-photo-quote__body">Texas is a large geographic area characterized by various landforms and climate patterns. The terrain includes plains, hills, and coastal regions. It contains a network of infrastructure, such as highways and bridges, that spans the distance between different map coordinates. The state's boundaries encompass a significant amount of square mileage.</p>
    <p class="txds-photo-quote__attribution">&mdash; TDOA Spokesperson</p>
  </div>
</div>

Photo Left, Quote Right (Right)

Use the full-width preview for the Right variant to preserve image proportions and overlap behavior.

Photo Right, Quote Left (Left)

Use the full-width preview for the Left variant to preserve image proportions and overlap behavior.

Character Limits

Element Limit
Title 55 characters max
Body text 600 characters max

CSS Classes

Class Description
txds-photo-quote Base container.
txds-photo-quote--bottom Photo on top, quote block overlapping below.
txds-photo-quote--right Photo on left, quote overlapping from the right.
txds-photo-quote--left Quote on the left, photo on the right.
txds-photo-quote__photo Photo container.
txds-photo-quote__quote Quote block with gray background and rounded corners.
txds-photo-quote__title Optional title above the quote text.
txds-photo-quote__body The quote or statement text.
txds-photo-quote__attribution The person or source attributed to the quote.