Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.7.5.1.2 Responsive Hero Image Micro
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. 
    <div class="col_all overflow_hidden row_all">
        <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>
    </div>
Copy Code