Hero Section 25
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 | 1.625rem | 3.5625rem | 478px | 1512px | clamp(1.625rem, 0.7293rem + 2.9981vw, 3.5625rem) |
| 62.5% | 10px | 2.6rem | 5.7rem | 478px | 1512px | clamp(2.6rem, 1.1669rem + 2.9981vw, 5.7rem) |
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.
Components used
BEM class name block
.hero-25__container
Category
Last update
September 9, 2024