Hero Section 26
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.
Components used
BEM class name block
.hero-26__container
Category
Last update
September 9, 2024