Banners Main Element

Visual Example

Neque porro quisquam est qui dolorem ipsum

Neque porro quisquam est qui dolorem ipsum quia. Fusce rutrum eget tortor sed venenatis. In eget aliquam purus.

Code Usage

HTML
  1. <div class="__mst_banner_hero_outer_container">
  2. <div id="mst_hero_banner" class="__mst_banner_hero_container">
  3. <div class="__mst_banner_item">
  4. <div class="__mst_banner_text_container">
  5. <div class="__mst_banner_heading_container">
  6. <h1 class="__mst_banner_heading __mst_heading_h1">Neque porro quisquam est qui dolorem ipsum</h1>
  7. </div>
  8. <div class="__mst_banner_subheading_container">
  9. <p class="__mst_body">Neque porro quisquam est qui dolorem ipsum quia. Fusce rutrum eget tortor sed venenatis. In eget aliquam purus. </p>
  10. </div>
  11. </div>
  12. <div class="__mst_banner_hero_image_container">
  13. <img class="__mst_banner_hero __mst_banner_hero_desktop" src="http://mercer-digital-styleguide.devwell2.io/src/components/banners/assets/img/examples/stock4.jpg">
  14. <img class="__mst_banner_hero __mst_banner_hero_mobile" src="http://mercer-digital-styleguide.devwell2.io/src/components/banners/assets/img/examples/stock4-mobile@2x.jpg">
  15. </div>
  16. </div>
  17. </div>
  18.  
  19. <div class="__mst_banner_buttons_container">
  20. <div class="small-12 medium-3 columns __mst_banner_button_column">
  21. <a href="#">
  22. <button class="__mst_button __mst_banner_button ">Fusce rutrum eget tortor sed venenatis.</button>
  23. </a>
  24. </div>
  25. <div class="small-12 medium-3 columns __mst_banner_button_column">
  26. <a href="#">
  27. <button class="__mst_button __mst_banner_button">Fusce rutrum eget tortor sed venenatis.</button>
  28. </a>
  29. </div>
  30. <div class="small-12 medium-3 columns __mst_banner_button_column">
  31. <a href="#">
  32. <button class="__mst_button __mst_banner_button">Fusce rutrum eget tortor sed venenatis.</button>
  33. </a>
  34. </div>
  35. <div class="small-12 medium-3 columns __mst_banner_button_column">
  36. <a href="#">
  37. <button class="__mst_button __mst_banner_button">Fusce rutrum eget tortor sed venenatis.</button>
  38. </a>
  39. </div>
  40. </div>
  41. </div>
Javascript
  1. $("#mst_hero_banner").__mstBanner();