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)

Copy this CSS. Notice the precise calc(100% + 8cqi + 4px) on the .name element. This ensures the band reaches the edges perfectly at all scales, replacing the fragile margin/percentage approach.

.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; }

/* Perfect edge-to-edge alignment logic */
.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; }