merge

apps/docs/components/cardLink/cardLink.css

@@ -15,7 +15,7 @@
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    height: 14rem;
+    min-height: 14rem;
     overflow: hidden;
     position: relative;
     padding: var(--hd-space-4) 0;

apps/docs/content/getting-started/guides/components.mdx

@@ -137,7 +137,7 @@ Take a look to [Hopper's components source code](https://github.com/gsoft-inc/wl
 <br/><br/> Share your needs in **#ds-hopper!**
 </Callout>
 
-### 🥈 Custom components using base components
+### 🥈 Custom Components Using Base Components
 
 If the existing Design System component feels too complex for your needs, take a closer look at its underlying structure in the code. In Hopper, it's likely built on a [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) component, which you can directly leverage to create a more tailored solution. React Aria offers a robust library of foundational components, making it a versatile starting point. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.
 
@@ -147,7 +147,7 @@ If the existing Design System component feels too complex for your needs, take a
 Using this approach may require you to restyle the entire component, which is fine. At this stage, you’re essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!
 </Callout>
 
-### 🥉 Custom components using hooks
+### 🥉 Custom Components Using Hooks
 
 If there is no base components to use, or if the base component is again too strict for you needs, you can use underlying hooks for more granular control. [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) also offer hooks that you can tailor components more precisely to your needs. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.
 
@@ -157,7 +157,7 @@ If there is no base components to use, or if the base component is again too str
 Using this approach may require you to restyle the entire component, which is fine. At this stage, you’re essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!
 </Callout>
 
-### 🛠️ Building components from scratch
+### 🛠️ Building Components From Scratch
 
 For unique needs that go beyond the capabilities of design system components, building a component from scratch may be necessary. At this point, the only recommendation we can give is to refer to the [WAI Aria Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) or [Spec](https://www.w3.org/WAI/ARIA/apg/) to determine the expected behavior of controls. Using this approach you will have to style the entire component, which is fine. Just be sure to use [Hopper tokens](../../tokens/overview/introduction) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!
 

apps/docs/content/getting-started/installation-path/javascript.mdx

@@ -9,7 +9,7 @@ Hopper is a Design System that provides a collection of tokens and icons to help
 
 You don't need to use React to take advantage of Hopper's features. This guide will show you how to use Hopper tokens and icons in any framework or plain HTML/CSS project.
 
-Hopper tokens are predefined design decisions (such as colors, spacing, and typography) translated into CSS variables to style your application. For icons, you can use Hopper's SVG icons, available via the @hopper-ui/svg-icons package.
+Hopper tokens are predefined design decisions (such as colors, spacing, and typography) translated into CSS variables to style your application. For icons, you can use Hopper's SVG icons, available via the `@hopper-ui/svg-icons` package.
 
 ## Installation
 

apps/docs/content/getting-started/installation-path/react.mdx

@@ -7,7 +7,7 @@ order: 1
 Hopper is a Design System that provides a collection of [React components](../../components/component-list), [tokens](../../tokens/overview/introduction), and [icons](../../icons/overview/introduction) to help you build applications.
 
 **Requirements:**
-- [React 18](https://reactjs.org/) or later
+- [React 18](https://reactjs.org/) or higher.
 
 ## Installation
 

apps/docs/content/getting-started/overview/installation.mdx

@@ -28,12 +28,12 @@ Select the path that best suits your setup:
 Looking for a more tailored or specialized setup? Hopper offers advanced options to meet unique project requirements.
 
 {/* TODO */}
-- [Micro Frontend Architecture](#): Integrate Hopper into modular, micro-frontend-based projects. <Tag>Coming Soon</Tag>
-- [Granular CSS Imports](#): Optimize performance by importing only the CSS needed for specific components. <Tag>Coming Soon</Tag>
+- Micro Frontend Architecture: Integrate Hopper into modular, micro-frontend-based projects. <Tag>Coming Soon</Tag>
+- Granular CSS Imports: Optimize performance by importing only the CSS needed for specific components. <Tag>Coming Soon</Tag>
 
 ## Guides
 
 Explore our collection of guides designed to help you get the most out of Hopper. From styling tips to advanced customization techniques, these resources are here to support your journey with our design system. Check back often as we continue to expand with more tutorials and best practices.
 
-- **Text Crop**: Discover how to achieve perfect vertical text alignment with our Text Crop guide. Learn how to compensate for uneven whitespace in web fonts and improve the appearance of your text using simple, effective CSS techniques. [Learn more about Text Crop](./guides/text-crop)
-- **Customizing Components**: Explore the flexibility of Hopper and Orbiter with our Customizing Components guide. This article introduces various customization options, from minimal styling adjustments to building entirely new components, categorized into distinct tiers to help you make the best choice for your needs. [Learn more about Customizing Components](./guides/components)
+- **Text Crop**: Discover how to achieve perfect vertical text alignment with our Text Crop guide. Learn how to compensate for uneven whitespace in web fonts and improve the appearance of your text using simple, effective CSS techniques. [Learn more about Text Crop](../guides/text-crop)
+- **Customizing Components**: Explore the flexibility of Hopper and Orbiter with our Customizing Components guide. This article introduces various customization options, from minimal styling adjustments to building entirely new components, categorized into distinct tiers to help you make the best choice for your needs. [Learn more about Customizing Components](../guides/components)