7.7 #permalink SidePhoto

Toggle example guides Toggle HTML markup

A compound element with a photo on one side and text next to it at large sizes, which flows below it on mobile. sidePhoto_tall is a taller element on larger screens, and sidePhoto_lg is the same, but the breakpoint is at lg instead of md.

Example

Side Photo

blurb with some text and stuff. let's add some more words.

button
Markup 
   <div class="grid-12 layout_inlineBlock layout_rel layout_alignRight layout_centerVertical col_defaultBg layout_heightAuto">
      <a href="www.google.com" class="img-bg grid-12 grid-md-6 layout_abs_left img-bg-cover sidePhoto" style="background-image:url(/img/banners/sidePhoto_1.jpg);"></a>
      <div class="grid-12 grid-md-6 box_horizontalPadded4 box_verticalPadded5 layout_center">
         <h3 class="box_bottomMargin2 col_ggPrimary1Text"><a class="col_inherit" href="www.google.com">Side Photo</a></h3>
         <p class="box_bottomPadded2">blurb with some text and stuff. let's add some more words.</p>
         <a class="btn btn_simple btn_transparent text_fontSizeSmaller btn_ggPrimary1" href="www.google.com">button</a>
      </div>
   </div>
Source: modules/07_large_elements/sidePhoto.less, line 1