Add picture full width component

components/public-page-components.html

@@ -50,6 +50,23 @@
         </article>
       </div>
     </section>
+
+    <section id="component-picture-full-width">
+      <p class="sg-preview-label">Component: Picture Full Width</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <img
+            class="sg-picture-full-width"
+            data-component="picture-full-width"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
+            alt="Platzhalterbild für die Picture Full Width Component"
+            width="1600"
+            height="900"
+          >
+        </div>
+      </div>
+    </section>
   </div>
 
 </body>

styles/44-components-public-page-components.css

@@ -67,6 +67,13 @@
   justify-content: flex-end;
 }
 
+.sg-picture-full-width {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
 .sg-page-public-page-components .sg-preview-area {
   display: flex;
   flex-direction: column;
@@ -75,7 +82,8 @@
 
 @media (max-width: 48rem) {
   .sg-text-block,
-  .sg-card--call-to-action-card {
+  .sg-card--call-to-action-card,
+  .sg-picture-full-width {
     width: 100%;
   }
 }