Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.4.1 Product Banner

Sub.Placeholder.Image.320x300 - Image 320x300 Sub.Placeholder.Image.600x300 - Image 600x300 Sub.Placeholder.Image.1024x256 - Image 1024x256 Sub.Placeholder.Image.1200x300 - Image 1200x300
Sub Components in Design:

    Example

    Default styling

    Hero Image

    ProductNameSAP
    Product Description

    NOTE:
    The color in the product name uses the pathway color codes 
    <div class="columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 m-t_n4 m-x_n4:lg min-h_20 overflow_hidden relative rows_1">
  <div class="col_all row_all ">
    <picture class="bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42" media="(min-width: 1024px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42" media="(min-width: 768px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" alt="Hero Image" class="bg_cover flex_100">
    </picture>
  </div>
  <div class="col_all columns_1 font-size_up-2 grid inset_0 items_center justify_start p-y_3 p-y_4:md p-y_5:lg row_all self_center">
    <h1 class="c_white font-size_up-2 isolation_isolate lh_1 m_0 relative self_center">
      <span class="inline-block p-x_4 p-y_3 bg_acc-n3" style="box-decoration-break: clone;"><strong class="font_xbold c_special" >ProductName</strong>SAP</span><br>
      <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3" style="box-decoration-break: clone;">Product Description</span>
    </h1>
  </div>
</div>
    Copy Code