Groeihof logo Example

Groeihof Logo Component

This is a responsive logo component built using BEM and CSS container queries.

Download CSS

You can download the CSS file for this component here:gf-logo.css

HTML Structure

<a href="#link-to-home" class="gf-logo">
    <img
      class="gf-logo__img"
      src="/images/svg/logo-groeihof.svg"
      alt="logo"
      width="822"
      height="956"
    >
</a>

• Block: gf-logo — the <a> link wrapping the logo
• Element: gf-logo__img — the actual <img> inside the block

CSS

.gf-logo {
  display: block;
  container-type: inline-size;   /* enables container queries */
  container-name: gf-logo;
  width: min(100%, 100% - 3rem); /* full width minus a small gutter */
  margin-inline: auto;            /* centers the block */
}

.gf-logo__img {
  display: block;
  max-width: 100%;                /* prevents overflowing parent */
  height: auto;                   /* keeps aspect ratio */
  margin-inline: auto;            /* centers the image */
}

On small screens, the logo fills the parent width minus a small gutter. The max-width: 100% ensures it never grows beyond the container width.

Container Query

@container gf-logo (width >= 689px) {
  .gf-logo__img {
    width: min(40cqi, 411px);  /* responsive scaling, capped at 411px */
  }

The container query triggers when the block’s inline size is at least 689px.

• 40cqi — 40% of the container’s inline size (scales with container)
• 411px — caps the image at half the intrinsic width (822px) to prevent it from growing too large

References

• BEM CSS
• MDN: Container Queries
• MDN: CSS min() function

Tweaking Options

• Breakpoint: width >= 689px — adjust for when the container query should trigger
• Scaling: 40cqi — adjust how much the image grows with the container
• Max width: 411px — adjust up to the full intrinsic width if larger logos are acceptable

This setup ensures the logo is fluid on small screens and capped for readability on larger screens, while keeping BEM semantics clean.