add hero types

olton · olton · commit 5b2f4fa4a073 · 2025-07-09T14:06:08.000+03:00
diff --git a/examples/hero4.html b/examples/hero4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link href="../lib/metro.css" rel="stylesheet">
+
+    <title>Hero - Metro UI :: Popular HTML, CSS and JS library</title>
+
+</head>
+<body class="cloak h-100-vh">
+
+<div class="container">
+    <nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
+        <div class="app-bar-item-static no-hover">
+            <div class="text-leader">Component Name</div>
+        </div>
+        <div class="app-bar-item-static no-hover ml-auto">
+            <input type="checkbox" data-role="theme-switcher"/>
+        </div>
+    </nav>
+
+    <div class="hero hero4 bg-cyan fg-white">
+        <div class="row">
+            <div class="cell-md-6 d-flex flex-justify-center flex-column">
+                <h1>Hero Header</h1>
+                <div class="text-leader">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
+                </div>
+            </div>
+            <div class="cell-md-6 d-flex flex-center">
+                <img src="./images/rocket.svg" alt="" class="hero-image">
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="../lib/metro.js"></script>
+<script>
+</script>
+</body>
+</html>
diff --git a/lib/metro.all.css b/lib/metro.all.css
@@ -61173,6 +61173,9 @@ label:has(input) {
 .hero3 {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
 }
+.hero4 {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
+}
 @media all and (min-width: 768px) {
   .hero {
     padding: 160px 80px;
diff --git a/lib/metro.all.css.map b/lib/metro.all.css.map
diff --git a/lib/metro.css b/lib/metro.css
@@ -61173,6 +61173,9 @@ label:has(input) {
 .hero3 {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
 }
+.hero4 {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
+}
 @media all and (min-width: 768px) {
   .hero {
     padding: 160px 80px;
diff --git a/lib/metro.css.map b/lib/metro.css.map
diff --git a/source/components/hero/hero.less b/source/components/hero/hero.less
@@ -39,6 +39,10 @@
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
 }
 
+.hero4 {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
+}
+
 @media all and (min-width: @md) {
     .hero {
         padding: 160px 80px;
