Skip to main content

(Deprecated) Responsive hero banner

Original HTML for responsive hero banner. Deprecated as of 2023.02.13

Published onDec 07, 2022
(Deprecated) Responsive hero banner

You're viewing an older Release (#1) of this Pub.

  • This Release (#1) was created on Dec 07, 2022 ()
  • The latest Release (#2) was created on Feb 13, 2024 ().

HTML Block that displays a responsive two-column hero banner, with book cover image next to title, subtitle, and descriptive text.

@media only screen and (min-width: 750px) {
   .wfu-responsive-banner {
display: grid;
grid-template-columns: 300px 1fr;
padding: 1rem;
gap: 2rem;
max-width: 3000px;
align-items: center;
font: 500 100%/1.5 system-ui;
margin: 0 auto;
<div class="wfu-responsive-banner">

<div><img src="" alt="Cover Image" style="  max-width: 100%;
  height: auto; filter: drop-shadow(0 0 0.15rem black);"/>
<div style="float:right;">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><em>Published December 2022</em></p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed. Magna fringilla urna porttitor rhoncus dolor purus non. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sed velit dignissim sodales ut eu. Non consectetur a erat nam at lectus urna. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor.</p>
1 of 2
No comments here
Why not start the discussion?