Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.7.5.1.1 Responsive Hero Image
experimental

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/200, & 320/200

Example

Default styling

Hero Image
caution:
This item is not finalized and might be subject to change
NOTE:
It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results. 
<picture data-item="responsive-hero-image" class=" col_all grid row_all">
      <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="absolute inset_0 w_100">
</picture>
Copy Code