Hero Section 4
Layout description
Attractive hero component for organization or app landing page.
Capture your audience’s attention with a striking and impactful heading, a description that complements the heading, and a label at the top indicating a promotion or something else to further persuade your audience.
This layout uses fluid typography
This layout’s uses clamp() with a root font size of 62.5%. For a root font size of 100%, see the table below.
Clamp function in Heading
| Root Font size | 1 rem = | Min font size | Max font size | Min width Viewport | Max width Viewport | Clamp function |
|---|---|---|---|---|---|---|
| 100% | 16px | 2rem | 4rem | 478px | 1512px | clamp(2rem, 1.0754rem + 3.0948vw, 4rem) |
| 62.5% | 10px | 3.2rem | 6.4rem | 478px | 1512px | clamp(3.2rem, 1.7207rem + 3.0948vw, 6.4rem) |
Effective hero section design tips:
- Use high-quality imagery: The image is the most crucial element of the hero section, so it’s important to use high-quality visuals.
- Keep text concise: The hero section’s text should be clear and concise, conveying the website’s main message in just a few words.
- Use a clear call to action: The call-to-action button should be eye-catching and easy to find.
