Source: dist/css/acc_boot.css, line 9653
The product banner features a headline with the product name, white tagling over a brand colored background. The product banner requires four different image sizes to accommodate various screen widths. The image sizes needed are 320x300, 600x300, 1024x256, and 1200x300.
<div class="columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 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 p-x_4" style="box-decoration-break: clone;">Product Description</span>
</h1>
</div>
</div>