Super Lawyers Badge: Responsive Redesign

The current embed relies on hardcoded pixel heights and font sizes, causing text to spill out of the badge when placed in constrained columns. This proposal refactors the badge using modern CSS Container Queries (cqi units) and the exact original class names. The badge now scales proportionally—just like an SVG or image—while remaining fully clickable, accessible HTML text.

Interactive Scaling Demo

Use the slider to change the width of the parent container. Notice how the fonts, padding, and border radii recalculate flawlessly in real-time.

  • Uses original `slbadge` class architecture.
  • Font sizes adjust perfectly.
  • Overhanging `.name` band calculates exact width to edge.
  • Corners maintain proportional rounding.
  • Height scales dynamically to maintain aspect ratio.

Static Width Constraints

When placed in strict columns, the wrappers obey their max/min widths exactly without flexbox distortion.

250px Width
Rated by Rising Stars
Ali Komaili
2022
200px Width (Original)
Rated by Rising Stars
Ali Komaili
2022
150px Width
Rated by Rising Stars
Ali Komaili
2022
100px Width
Rated by Rising Stars
Ali Komaili
2022

Implementation Code

1. Original HTML Structure Preserved

The badge structure remains identical to the current implementation, utilizing the slbadge-v4-embed wrapper to initialize the container query.

<div class="slbadge-v4-embed">
  <a href="https://..." class="slbadge-v4 atty-free monochrome">
    <div class="inner">
      <div class="logo-container rs">
        <span class="text-uppercase">Rated by</span>
        <div class="logo">
          <img src="..." alt="Super Lawyers logo">
        </div>
        <span class="rising-stars">Rising Stars</span>
      </div>
      <span class="name">Ali Komaili</span>
      <div class="year-container">
        <span class="year">2022</span>
      </div>
    </div>
  </a>
</div>

2. The CSS (Container Queries)

This is the complete, drop-in replacement CSS for the badge. Instead of relying on rigid, fixed pixel values (px) and viewport-based units that break in constrained layouts, this new approach uses modern CSS Container Queries (container-type: inline-size) and container query inline (cqi) units. By establishing the .slbadge-v4-embed wrapper as a container, every element inside—from font sizes and padding to border radii—dynamically calculates its size purely based on the width of that wrapper. This guarantees the badge remains perfectly proportioned and infinitely scalable, acting fluidly like an image while remaining highly accessible, SEO-friendly HTML text. 

.slbadge-v4-embed { container-type: inline-size; width: 100%; display: block; }

.slbadge-v4 {
    display: flex; flex-direction: column; box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif; text-decoration: none;
    color: #404040; background: #fff; border: 1px solid #404040;
    border-radius: 15cqi; padding: 4cqi; aspect-ratio: 1 / 1.05;
}

.slbadge-v4 * { box-sizing: border-box; }

.slbadge-v4 .inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-between; border: 2px solid #404040;
    border-radius: 11.25cqi; height: 100%; position: relative;
}

.slbadge-v4 .logo-container {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex-grow: 1; width: 100%; padding: 4cqi 0;
}

.slbadge-v4 .text-uppercase { text-transform: uppercase; font-weight: 700; font-size: 5cqi; line-height: 1.2; }
.slbadge-v4 .logo { width: 72%; border-bottom: 2px solid #404040; padding-bottom: 3.5cqi; margin: 2.5cqi 0; display: flex; justify-content: center; }
.slbadge-v4 .logo img { width: 100%; height: auto; }
.slbadge-v4 .rising-stars { text-transform: uppercase; font-weight: 700; font-size: 5cqi; line-height: 1; }

.slbadge-v4 .name {
    background: #404040; color: #fff; align-self: center;
    width: calc(100% + 8cqi + 4px); text-align: center; 
    font-weight: 700; font-size: 7.5cqi; padding: 3cqi 2cqi; 
    line-height: 1.2; display: flex; align-items: center; 
    justify-content: center; min-height: 25cqi;
}

.slbadge-v4 .year-container {
    display: flex; align-items: center; justify-content: center;
    flex-grow: 1; padding: 2cqi;
}

.slbadge-v4 .year { font-weight: 700; font-size: 11cqi; }