A quote banner is a type of text banner that displays a quote in large, prominent text that spans the width of the banner.
When to use
Quote banners can be used to highlight a quote of someone notable that is related to the page’s content.
Anatomy
Examples
<divclass="ucla-banner__quote"><divclass="container"><divclass="ucla"><divclass="col span_10_of_12"style="margin: 0 auto;"><divclass="ucla-banner__quote-body"><imgclass="ucla-banner__quote-image"src="../../../theme-assets/img/examples/person-card-gene.jpg"alt="Gene Block"
/><divclass="ucla-banner__quote-content"><figure><blockquotecite="https://www.ucla.edu"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fames ac turpis egestas integer eget aliquet nibh praesent
tristique.</p></blockquote><figcaption><cite>Name, Title</cite></figcaption></figure><buttonclass="ucla-btn ucla-btn--secondary-light ucla-btn--icon-trail"
>Button Label
<svgwidth="18"height="18"viewBox="0 0 18 18"fill="none"xmlns="http://www.w3.org/2000/svg"
><pathd="M16 16L2 16L2 2L9 2V0L2 0C0.89 0 0 0.9 0 2L0 16C0 17.1 0.89 18 2 18L16 18C17.1 18 18 17.1 18 16L18 9L16 9V16ZM11 0V2L14.59 2L4.76 11.83L6.17 13.24L16 3.41L16 7H18V0L11 0Z"fill="white"
/></svg></button></div></div></div></div></div></div>
The quote banner uses a solid-color background with a contained width content. You may either set the width of this banner inside a container or use it as a full-width banner.
.ucla-banner__quote - Container that sets the background color
.container - Container that sets the width of the content
.ucla - Container that houses the columns
.col.span_10_of_12 - Column that spans the full width of the container
.ucla-banner__quote-body - Container that houses the quote contents
.ucla-banner__quote-image - Avatar image of the person quoted
.ucla-banner__quote-content - Container for the quote
<divclass="ucla-banner__quote"><divclass="container"><divclass="ucla"><divclass="col span_10_of_12"style="margin: 0 auto;"><divclass="ucla-banner__quote-body"><imgclass="ucla-banner__quote-image"src="image.jpg"alt="John Doe" /><divclass="ucla-banner__quote-content"><figure><blockquotecite="https://www.ucla.edu"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas integer eget aliquet nibh praesent tristique.</p></blockquote><figcaption><cite>Name, Title</cite></figcaption></figure><ahref="#"class="ucla-btn ucla-btn--secondary-light ucla-btn--icon-trail">Button Label
<svgwidth="18"height="18"viewBox="0 0 18 18"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M16 16L2 16L2 2L9 2V0L2 0C0.89 0 0 0.9 0 2L0 16C0 17.1 0.89 18 2 18L16 18C17.1 18 18 17.1 18 16L18 9L16 9V16ZM11 0V2L14.59 2L4.76 11.83L6.17 13.24L16 3.41L16 7H18V0L11 0Z"fill="white" /></svg></a></div></div></div></div></div></div>
Full width Quote Banner in a Container
If you are in a container, you are able to add in a full-width quote banner without closing the container with the .ucla-banner__quote-full-width.