1. Example & HTML Structure

An example of the Hero component:

We are Breakthrough T1D

We’re here to make every day with type 1 diabetes better, and we won’t stop until the condition is a thing of the past.

About Our evolved Brand

The following example shows the full HTML structure of the Hero component:

<div class="bt1d-hero">
  <div class="bt1d-hero__content-wrap bt1d-blue-background-color bt1d-text-color--light">
    <h1 class="bt1d-hero__title">We are Breakthrough T1D</h1>

    <p class="bt1d-hero__description">We’re here to make every day with type 1 diabetes better, and we won’t stop
      until the condition is a thing of the past.</p>

    <div>
      <a role="button" href="#" class="bt1d-button">About Our evolved Brand</a>
    </div>
  </div>

  <figure class="bt1d-hero__image-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" width="182.292" height="545" viewBox="0 0 182.292 545"
      preserveAspectRatio="xMinYMax" class="curve-circle--desktop">
      <path
        d="M182.292,661H0V116H181.305A388.493,388.493,0,0,0,99.836,238.525,386.046,386.046,0,0,0,77.71,310.648c-2.535,12.531-4.47,25.356-5.751,38.116C70.659,361.71,70,374.911,70,388a394.188,394.188,0,0,0,1.978,39.418c1.294,12.819,3.247,25.7,5.806,38.289a385.884,385.884,0,0,0,57.677,138.032A390.8,390.8,0,0,0,182.29,661l0,0h0Z"
        transform="translate(0 -116)" fill="#002bff" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="545" height="182.292" viewBox="0 0 545 182.292"
      preserveAspectRatio="xMinYMax" class="curve-circle--mobile">
      <path
        d="M182.292,661H0V116H181.305A388.493,388.493,0,0,0,99.836,238.525,386.046,386.046,0,0,0,77.71,310.648c-2.535,12.531-4.47,25.356-5.751,38.116C70.659,361.71,70,374.911,70,388a394.188,394.188,0,0,0,1.978,39.418c1.294,12.819,3.247,25.7,5.806,38.289a385.884,385.884,0,0,0,57.677,138.032A390.8,390.8,0,0,0,182.29,661l0,0h0Z"
        transform="translate(-116 182.292) rotate(-90)" fill="#002bff" />
    </svg>
    <img src="https://placehold.co/750x550" class="bt1d-hero__image" />

  </figure>
</div>

Key Classes:

• bt1d-hero: The main wrapper for the Hero component, containing all the content.
• bt1d-hero__content-wrap: Wraps the content (title, description, and button) inside the Hero component, typically styled with background color and text color classes.
• bt1d-hero__title: The class for the main title of the Hero section.
• bt1d-hero__description: The class for the supporting text, used to add additional context to the title.
• bt1d-button: The class for the CTA button. It can link to relevant actions, such as “Learn More” or “Get Started.”
• bt1d-hero__image-wrapper: Wraps the image and includes an SVG mask over the image to add a unique design element.
• bt1d-hero__image: The class for the image

2. Image Focal Point Customization

While the Hero component offers a consistent design structure, users can adjust the focal point of the image using CSS to better align it with the overall content.

Code Example:

.bt1d-hero__image {
  object-position: 50% 50%; /* Adjust the focal point of the image */
}