Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 15770

4.1.3.1.1 Responsive Hero Image

The Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300

Example

Default styling

Hero Image
NOTE:
It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results. 
  <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
      media="(min-width: 1024px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
      media="(min-width: 768px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
      media="(min-width: 400px)" class="display_none">
    <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
      class="flex_100">
  </picture>
Copy Code