Banners

<div class="banner-base banner-one-line shadow-3"> <span class="text-body1"> Lorem ipsum dolor sit amet lore dolorem ipsum dolor sit amet lore dolorem ipsum dolor sit amet lore dolor </span> <button class="button button-primary">Action</button> </div>
<div class="banner-base banner-two-lines shadow-3"> <span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae delectus pariatur enim repudiandae dolor </span> <div class="actions"> <button class="button button-primary">Action 1</button> <button class="button button-primary">Action 2</button> </div> </div>
<div class="banner-base banner-two-lines-icon shadow-3"> <!-- icon --> <div class="icon"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="url(#pattern0)" /> <defs> <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0" transform="translate(-0.166667) scale(0.00387597)" /> </pattern> <image id="image0" width="344" height="258" xlink:href="data:image/png;base64,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" /> </defs> </svg> </div> <!-- content --> <div class="content"> <span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae delectus pariatur enim repudiandae dolor </span> <div class="actions"> <button class="button">Action 1</button> <button class="button">Action 2</button> </div> </div> </div>