<a href="{{relatedHref}}" class="tip-card">

<div class="tip-card-body">

<div class="tip-card-header">

<div class="tip-badges">

<span class="badge {{category}}">{{catDisplay}}</span>

<span class="badge {{difficulty}}">{{difficultyDisplay}}</span>

</div>

</div>

<h3>{{title}}</h3>

</div>

<div class="card-code">

<div class="card-code-layer old-layer">

<div class="mini-label">{{oldLabel}}</div>

<pre class="code-text">{{oldCode}}</pre>

</div>

<div class="card-code-layer modern-layer">

<div class="mini-label">{{modernLabel}}</div>

<pre class="code-text">{{modernCode}}</pre>

</div>

<span class="hover-hint">{{cards.hoverHintRelated}}</span>

</div>

<div class="tip-card-footer">

<span class="browser-support"><span class="dot"></span>JDK {{jdkVersion}}+</span>

<span class="arrow-link">→</span>

</div>

</a>