Support a highlights section

Author: satya164

src/css/custom.css

@@ -1078,6 +1078,62 @@ code {
   border-width: 1px;
 }
 
+.feature-grid ul {
+  list-style: none;
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--ifm-spacing-horizontal);
+
+  li + li {
+    margin-top: 0;
+  }
+
+  li {
+    position: relative;
+    border-radius: var(--ifm-global-radius);
+    overflow: hidden;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      var(--ifm-global-shadow-lw);
+
+    & > .video-player {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0 !important;
+      border-bottom: 1px solid var(--ifm-toc-border-color);
+
+      video {
+        aspect-ratio: 2 / 1;
+        width: 100%;
+        object-fit: cover;
+        border-radius: 0;
+      }
+
+      .video-player-icon {
+        display: none;
+      }
+    }
+
+    & > p {
+      font-weight: var(--ifm-font-weight-semibold);
+      margin: calc(var(--ifm-spacing-vertical) / 2)
+        var(--ifm-spacing-horizontal);
+
+      & > a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      & > a::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+}
+
 .blog-wrapper {
   & .container aside nav {
     margin-top: 2.25rem;

versioned_docs/version-7.x/native-bottom-tab-navigator.md

@@ -49,6 +49,24 @@ const MyTabs = createNativeBottomTabNavigator({
 });
 ```
 
+## Highlights
+
+<div className="feature-grid">
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-search.mp4" /></video>
+
+  [Search tab on iOS 26+](#search-tab-on-ios-26)
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-bottom-accessory.mp4" /></video>
+
+  [Bottom accessory](#bottomaccessory)
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-minimize.mp4" /></video>
+
+  [Minimize on scroll](#tabbarminimizebehavior)
+
+</div>
+
 ## Notes
 
 - Liquid Glass effect on iOS 26+ requires your app to be built with Xcode 26 or above.

versioned_docs/version-8.x/bottom-tab-navigator.md

@@ -78,6 +78,24 @@ export default function App() {
 }
 ```
 
+## Highlights
+
+<div className="feature-grid">
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-search.mp4" /></video>
+
+  [Search tab on iOS 26+](#search-tab-on-ios-26)
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-bottom-accessory.mp4" /></video>
+
+  [Bottom accessory](#bottomaccessory)
+
+- <video playsInline autoPlay muted loop><source src="/assets/7.x/native-bottom-tabs-ios-minimize.mp4" /></video>
+
+  [Minimize on scroll](#tabbarminimizebehavior)
+
+</div>
+
 ## Native vs Custom implementation
 
 The navigator provides 2 implementations that can be specified using the [`implementation`](#implementation) prop, `native` and `custom`. Many customization options are exclusive to one of the implementations. Make sure to check the documentation of each option to see which implementation it supports.