One of the biggest priorities we had while planning the Texas A&M Health redesign was making the content feel more personal, using quotes and stories from real students and faculty to highlight our messages.
When writing the HTML, I kept quote feature row simple, but included several layout options for large screens: the image can be on the left or right, top or bottom of the row. This adaptability allows the image offset to stay balanced with the rest of the page content, and lead the user's eye in the right direction. A link underneath the quote attribution can also be added to tie the quote to a news story or other more dynamic content.
<section class="container align-self-center"> <div class="row text-center justify-content-center"> <div class="col-lg-8"> <h2 class="section-heading">Filling the gaps in Primary care</h2> <p>With the ever-evolving state of health care, the role of pharmacists has expanded beyond the pharmacy counter to ensure that patients receive the most comprehensive care possible. Aggie pharmacists serve patients in community-based settings by administering immunizations, providing information on over-the-counter drugs and teaching about the importance of adhering to medication prescriptions.</p> </div> </div> </section> <section class="mt-xl-0 py-5 py-xl-0 quote-above" id="giving-quote"> <div class="container"> <div class="row"> <div class="col-4 d-none d-md-block text-center px-3"><img alt="Samantha Jo Perales" class="img-fluid" src="../images/community/perales-square.jpg"/> </div> <div class="col-md-8 quote-box text-white pr-4"> <blockquote class="ml-2 mb-4 transparent-quotes-left"><span class="sr-only">"</span> "The thing that influenced me the most to attend the Texas A&M Irma Lerma Rangel College of Pharmacy was the mission: To build pharmacists for underserved areas, like the Rio Grande Valley, where I’m from. The program and its mission had my heart from the beginning and the college provides me with many opportunities to give back to the community that I love.”</blockquote> <h3 class="text-lg-right font-family-sans pr-2">Samantha Joe Perales</h3> <p class="text-lg-right text-white ml-auto font-italic pr-2">Class of 2017</p> <!--<p class="text-lg-right"><a class="ghost" href="#">Link to story if needed</a></p>--> </div> </div> </div> </section>