<div class="container">
<div class="base-height">
<h2>Some Cap Unit Test
<svg class="icon icon-stamina" aria-hidden="true">
<use xlink:href="#potion" />
</svg>
</h2>
<h3>A smaller title with the same cap
<svg class="icon icon-stamina" aria-hidden="true">
<use xlink:href="#enhancement" />
</svg>
</h3>
</div>
<div class="using-rem">
<h2>Using Rem <svg class="icon icon-stamina" aria-hidden="true">
<use xlink:href="#potion" />
</h2>
<h3>A smaller title using the font size for icon
<svg class="icon icon-stamina" aria-hidden="true">
<use xlink:href="#enhancement" />
</svg>
</h3>
</div>
</div>
<!-- SVG sprite -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0; visibility: hidden; position: absolute;" aria-hidden="true">
<symbol id="potion" viewBox="0 0 18 30">
<g>
<path fill="#e0e1e0" d="M15.6 15.96h-.07c-.18-.02-.35-.04-.51-.05-.04 0-.08 0-.12-.01l-.43-.03c-.16-.01-.31-.02-.45-.02h-.28c-1.79-.09-3.58.3-5.16 1.15-1.48.71-3 1.44-7 1.1l-.36-.03-.21-.03c.85-2.24 2.63-4 4.89-4.82.05-.02.09-.07.09-.12V6.03c0-.07-.05-.13-.12-.13-.77 0-1.39-.63-1.38-1.39 0-.76.62-1.38 1.38-1.38h6.06c.77 0 1.39.63 1.38 1.39 0 .76-.62 1.38-1.38 1.38-.07 0-.13.05-.13.12v7.07c0 .05.03.1.09.12 1.48.53 2.78 1.48 3.73 2.74Z" />
<path fill="#cac8c7" d="M12 13.21s-.08-.07-.08-.12V6.03c0-.07.05-.12.12-.13.36 0 .7-.15.94-.41.25-.26.39-.61.39-.98a1.37 1.37 0 0 0-1.34-1.39L10.99 3c.46.22 0 .44 0 1 0 .37.25-.26 0 0s-.15 0-.5 0c-.07 0-.5-.07-.5 0v8.97c0 .05.03.1.08.12 1.44.54 2.69 1.49 3.59 2.74h-.07c-.17-.02 1.41.17.19.01-.09-.01.17 0 .27 0 .14 0 .29.01.44.02.14 0 .28.02.42.03.04 0 .08 0 .12.01.16.02.33.03.5.05h.07c-.9-1.25-2.15-2.2-3.59-2.74Z" />
<path fill="var(--potion-color)" d="M17.33 21.17c0 4.67-3.77 8.46-8.44 8.47S.43 25.87.42 21.2v-.03c0-.98.16-1.96.48-2.89.12.02.24.03.36.04l.28.03.35.03c.78.06 1.45.07 2.06.06.32-.01.61-.03.88-.06.62-.05 1.24-.17 1.84-.34.18-.05.35-.11.51-.16.51-.19 1-.41 1.48-.65.38-.18.75-.36 1.16-.52.16-.07.33-.13.5-.18 1.46-.42 2.98-.55 4.49-.38.31.03.64.06.98.1 1 1.45 1.54 3.17 1.53 4.94Z" />
<path fill="var(--support-color)" d="M15.8 16.23c-.34-.04-.67-.07-.98-.1-.23-.02-.44-.03-.65-.04a8.559 8.559 0 0 1 1.24 4.49 8.412 8.412 0 0 1-9.94 8.31c4.26 1.89 9.25-.04 11.14-4.31.48-1.08.72-2.25.72-3.43 0-1.76-.52-3.49-1.53-4.94Z" />
<path fill="#616262" d="M12 .5H6L7 4h4l1-3.5z" />
<path fill="#4d4d4d" d="M10.71.5 10 3H6.71L7 4h4l1-3.5h-1.29z" />
<path d="M2.74 23.5c-.23 0-.43-.16-.49-.38C2.08 22.43 2 21.72 2 21c0-.35.02-.71.06-1.06.03-.27.28-.47.55-.44.27.03.47.28.44.55-.03.31-.05.63-.05.94 0 .63.07 1.27.22 1.88.06.27-.1.54-.37.6-.04 0-.08.01-.12.01ZM5 26.5a.46.46 0 0 1-.33-.13c-.37-.32-.71-.68-1.01-1.06-.17-.22-.14-.53.08-.7s.53-.14.7.08c.27.34.57.65.9.94.21.18.23.5.04.71a.48.48 0 0 1-.37.17Z" class="cls-5" />
</g>
<path fill="#010101" d="M12.5 12.66V6.44A2.012 2.012 0 0 0 13.94 4c-.23-.88-1.02-1.5-1.94-1.5h-.05l.53-1.86a.501.501 0 0 0-.34-.62C12.09 0 12.05 0 12 0H6c-.28 0-.5.22-.5.5 0 .05 0 .09.02.14l.53 1.86H6c-1.1 0-2 .9-2 2 0 .91.62 1.71 1.5 1.94v6.22A8.845 8.845 0 0 0 0 21a9 9 0 0 0 18 0 8.845 8.845 0 0 0-5.5-8.34ZM11.34 1l-.71 2.5H7.38L6.67 1h4.67ZM6.17 13.47c.2-.07.33-.26.33-.47V6c0-.28-.22-.5-.5-.5-.55 0-1-.45-1-1s.45-1 1-1h.34l.18.64c.06.21.26.36.48.36h4c.22 0 .42-.15.48-.36l.18-.64H12c.55 0 1 .45 1 1s-.45 1-1 1c-.28 0-.5.22-.5.5v7c0 .21.13.4.33.47 1.12.4 2.14 1.06 2.96 1.92-3.41-.23-4.86.46-6.27 1.14-1.49.72-2.91 1.39-6.79 1.05a7.736 7.736 0 0 1 4.43-4.1ZM9 29c-4.42 0-7.99-3.58-8-8 0-.83.12-1.66.36-2.46.86.08 1.61.12 2.28.12 1.85.06 3.68-.37 5.31-1.24 1.47-.7 2.87-1.37 6.7-.96a8.116 8.116 0 0 1 1.34 4.53c0 4.42-3.58 7.99-8 8Z" />
</symbol>
<symbol id="enhancement" viewBox="0 0 19 30.11">
<g>
<path fill="#e0e1e0" d="M14.11 15.55c-2.7-.19-3.53.38-4.4.99-.89.61-1.81 1.25-5.04 1.06l2.63-6.23.02-.11V5.72c0-.13-.11-.21-.24-.22-.62 0-1.13-.56-1.13-1.25S6.46 3 7.09 3h4.81s.06 0 .09-.02c.03.01.06.02.1.02h.45c.63 0 1.14.56 1.14 1.25s-.51 1.25-1.14 1.25c-.12 0-.23.11-.23.25v5.5l.02.11 1.76 4.18Z" />
<path fill="#cac8c7" d="M12.01 2.98s-.06.02-.09.02h-1.38c.65.04 1.14.6 1.1 1.25.04.65-.46 1.21-1.1 1.25-.13 0-.23.12-.22.25v5.5l.02.12 1.71 4.18c1.33-.3-.62-.19 2 0l-1.71-4.18-.02-.12v-5.5c0-.13.09-.24.22-.25.65-.04 1.14-.6 1.1-1.25.04-.65-.46-1.21-1.1-1.25" />
<path fill="var(--potion-color)" d="M17.94 26.49c-1.63 1.99-4.22 2.87-8.39 2.87s-6.76-.89-8.39-2.87c-.41-.52-.49-1.23-.21-1.83l2.89-6.36c.5.03.96.05 1.38.05 2.62 0 3.52-.58 4.41-1.15.91-.58 1.77-1.14 4.72-.92l3.81 8.38c.28.6.2 1.31-.21 1.83Z" />
<path fill="var(--support-color)" d="m18.15 24.67-3.66-8.38c-.68-.06-1.35-.06-2.03-.01l3.34 7.64c.27.6.19 1.3-.2 1.83-1.57 1.98-4.06 2.87-8.07 2.87-1.14.01-2.28-.08-3.41-.28 1.45.7 3.32 1.03 5.76 1.03 4.02 0 6.51-.89 8.07-2.87.39-.52.47-1.23.2-1.83Z" />
<path fill="#616262" d="M12.44 0H6.56l.98 4h3.92l.98-4z" />
<path fill="#4d4d4d" d="m11.18 0-.7 3H7.26l.28 1h3.92l.98-4h-1.26z" />
<path d="M2.65 25.61c-.27 0-.49-.22-.49-.5 0-.07.01-.14.04-.2l.65-1.5c.11-.25.4-.37.65-.25.25.11.36.41.25.66l-.65 1.5c-.08.18-.25.3-.45.3ZM4.17 22.11c-.27 0-.49-.22-.49-.5 0-.07.01-.14.04-.2l.43-1c.11-.25.4-.37.65-.25.25.11.36.41.25.66l-.43 1c-.08.18-.25.3-.45.3Z" class="cls-8" />
</g>
<path fill="#010101" d="M18.77 24.35 13.33 11.5V6.55c.64-.28 1.27-1.37 1-2.44-.22-.88-1-1.5-1.9-2.11h-.05L12.9.75a.51.51 0 0 0-.34-.62c-.04-.01-.09-.02-.13-.13H6.56c-.27.11-.49.34-.49.61 0 .05 0 .09.02.14L6.61 2h-.05C5.48 2.61 4.6 3.51 4.6 4.61c0 .91.6 1.71 1.72 1.94v4.95L.23 24.35c-.4.86-.28 1.88.31 2.62 1.78 2.17 4.54 3.14 8.96 3.14s7.17-.97 8.96-3.14c.59-.74.71-1.76.31-2.62ZM11.79 1l-.7 3H7.91l-.7-3h4.58ZM7.28 12.21l.05-.21V6.5c0-.28-.22-.5-.5-.5-.55 0-1-.45-1-1s.45-1 1-1h.34l.18.64c.06.21.26.36.48.36h4c.22 0 .42-.15.48-.36l.18-.64h.34c.55 0 1 .45 1 1s-.45 1-1 1c-.28 0-.5.22-.5.5V12l.05.21 1.74 3.75c-2.72-.11-3.67.48-4.58 1.06-.9.56-1.83 1.15-4.96 1.02l2.7-5.83ZM17.7 26.33c-1.58 1.92-4.11 2.78-8.21 2.78s-6.63-.86-8.21-2.78c-.35-.44-.41-1.05-.17-1.56l2.79-6.15c.44.02.85.04 1.22.04 2.74 0 3.72-.63 4.6-1.19.89-.57 1.68-1.07 4.43-.88l3.72 8.18c.24.51.17 1.11-.17 1.55Z" />
</g>
</g>
</symbol>
</svg>
:root {
--font-size-title-h2: 3.5rem;
--font-size-title-h3: 2rem;
}
h2 {
font-size: var(--font-size-title-h2);
border-block: 1px solid olive;
}
h3 {
font-size: var(--font-size-title-h3);
border-block: 1px solid olive;
}
.icon {
display: inline-block;
height: 1cap;
margin-left: 0.5cap;
aspect-ratio: 1;
background: olive;
}
.using-rem .icon {
height: var(--font-size-title-h2);
}
.using-rem h3 .icon {
height: var(--font-size-title-h3);
}
body {
padding: 4vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-family: Georgia, serif;
background: ivory;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.