Recipe Ingredient Card
A warm cookbook page where ingredient names carry dotted underlines. Hover one and a side card lifts in with nutrition facts, substitution suggestions, and a sourcing note — designed for recipe sites, meal-plan apps, food databases.
Recipe Ingredient Card the 14th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ringd-stage">
<div class="ringd-card">
<div class="ringd-title">Roasted Lemon Herb Chicken</div>
<div class="ringd-subtitle">French Country · Serves 4</div>
<div class="ringd-meta">
<div class="ringd-meta-item"><div class="ringd-meta-label">Prep</div><div class="ringd-meta-val">20 min</div></div>
<div class="ringd-meta-item"><div class="ringd-meta-label">Cook</div><div class="ringd-meta-val">1 hr 15 min</div></div>
<div class="ringd-meta-item"><div class="ringd-meta-label">Total</div><div class="ringd-meta-val">1 hr 35 min</div></div>
<div class="ringd-meta-item"><div class="ringd-meta-label">Difficulty</div><div class="ringd-meta-val">Medium</div></div>
</div>
<div class="ringd-section-head">Ingredients</div>
<ul class="ringd-list">
<li>
<span class="ringd-qty">1 whole (3–4 lb)</span>
<span class="ringd-t">
<span class="ringd-name">free-range chicken</span>
<div class="ringd-tip">
<div class="ringd-tip-head"><div class="ringd-ing-name">Free-Range Chicken</div><div class="ringd-ing-type">Poultry · whole bird</div></div>
<div class="ringd-nutrition">
<div class="ringd-nut-title">Per 100g (roasted, no skin)</div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">165 kcal</span></div>
<div class="ringd-bar-wrap"><div class="ringd-bar" style="width:55%"></div></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Protein</span><span class="ringd-nut-val">31g</span></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Iron</span><span class="ringd-nut-val">1.1mg (14% DV)</span></div>
</div>
<div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Cornish game hens (halve cook time)</div><div class="ringd-sub">Bone-in chicken pieces</div></div>
<div class="ringd-note">Look for air-chilled, free-range birds — less water retention gives crispier skin.</div>
</div>
</span>
</li>
<li>
<span class="ringd-qty">2 whole heads</span>
<span class="ringd-t">
<span class="ringd-name">garlic</span>
<div class="ringd-tip">
<div class="ringd-tip-head"><div class="ringd-ing-name">Garlic</div><div class="ringd-ing-type">Allium · bulb</div></div>
<div class="ringd-nutrition">
<div class="ringd-nut-title">Per 3 cloves (9g)</div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">13 kcal</span></div>
<div class="ringd-bar-wrap"><div class="ringd-bar" style="width:10%"></div></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Allicin</span><span class="ringd-nut-val">high (antimicrobial)</span></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Vit C</span><span class="ringd-nut-val">9% DV</span></div>
</div>
<div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Roasted garlic paste (2 tbsp)</div><div class="ringd-sub">Shallots (milder flavour)</div></div>
<div class="ringd-note">Do not peel — roasted whole heads caramelize beautifully.</div>
</div>
</span>
</li>
<li>
<span class="ringd-qty">2 medium</span>
<span class="ringd-t">
<span class="ringd-name">lemons, zested and halved</span>
<div class="ringd-tip">
<div class="ringd-tip-head"><div class="ringd-ing-name">Lemon</div><div class="ringd-ing-type">Citrus fruit · fresh</div></div>
<div class="ringd-nutrition">
<div class="ringd-nut-title">Per 1 medium lemon (84g)</div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">22 kcal</span></div>
<div class="ringd-bar-wrap"><div class="ringd-bar" style="width:15%"></div></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Vitamin C</span><span class="ringd-nut-val">51mg (56% DV)</span></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Citric acid</span><span class="ringd-nut-val">tenderises meat</span></div>
</div>
<div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Meyer lemons (sweeter)</div><div class="ringd-sub">1½ limes + ½ orange</div></div>
<div class="ringd-note">Microplane the zest before cutting — releases essential oils lost once sliced.</div>
</div>
</span>
</li>
<li>
<span class="ringd-qty">¼ cup, fresh</span>
<span class="ringd-t">
<span class="ringd-name">thyme and rosemary</span>
<div class="ringd-tip">
<div class="ringd-tip-head"><div class="ringd-ing-name">Fresh Herbs</div><div class="ringd-ing-type">Lamiaceae · aromatic</div></div>
<div class="ringd-nutrition">
<div class="ringd-nut-title">Per tbsp fresh thyme (2.4g)</div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Thymol</span><span class="ringd-nut-val">antimicrobial terpene</span></div>
<div class="ringd-bar-wrap"><div class="ringd-bar" style="width:30%"></div></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Iron</span><span class="ringd-nut-val">1.7mg (10% DV)</span></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Rosmarinic</span><span class="ringd-nut-val">antioxidant</span></div>
</div>
<div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Dried herbs (use ⅓ the quantity)</div><div class="ringd-sub">Herbes de Provence (1 tbsp)</div></div>
<div class="ringd-note">Slide whole sprigs under the skin — the fat bastes the herbs during roasting.</div>
</div>
</span>
</li>
<li>
<span class="ringd-qty">4 tbsp, softened</span>
<span class="ringd-t">
<span class="ringd-name">unsalted butter</span>
<div class="ringd-tip">
<div class="ringd-tip-head"><div class="ringd-ing-name">Unsalted Butter</div><div class="ringd-ing-type">Dairy · fat</div></div>
<div class="ringd-nutrition">
<div class="ringd-nut-title">Per tbsp (14g)</div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">102 kcal</span></div>
<div class="ringd-bar-wrap"><div class="ringd-bar" style="width:78%"></div></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Saturated</span><span class="ringd-nut-val">7.3g</span></div>
<div class="ringd-nut-row"><span class="ringd-nut-name">Vitamin A</span><span class="ringd-nut-val">7% DV</span></div>
</div>
<div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Ghee (higher smoke point)</div><div class="ringd-sub">Olive oil (dairy-free)</div></div>
<div class="ringd-note">Unsalted lets you control seasoning. European-style (84%+ fat) gives richer results.</div>
</div>
</span>
</li>
</ul>
</div>
</div> .ringd-stage {
background: #fdf8f0;
/* Right room — ingredient cards pop to the RIGHT of each name,
~280px wide. The recipe card is centered with extra right space. */
padding: 40px 320px 40px 28px;
font-family: Georgia, serif;
}
.ringd-card {
max-width: 480px;
margin: 0 auto;
background: #fff;
border: 1px solid rgba(180, 160, 120, 0.25);
border-radius: 2px;
padding: 32px 36px;
box-shadow:
0 2px 22px rgba(100, 80, 40, 0.08),
0 0 0 4px rgba(180, 160, 120, 0.06);
}
.ringd-title {
font-family: Georgia, serif;
font-size: 26px;
font-style: italic;
color: #2c2010;
margin-bottom: 4px;
line-height: 1.2;
}
.ringd-subtitle {
font-size: 12px;
color: #a09070;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 20px;
}
.ringd-meta {
display: flex;
gap: 20px;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(180, 160, 120, 0.2);
flex-wrap: wrap;
}
.ringd-meta-label {
font-size: 8.5px;
color: #b0a080;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ringd-meta-val {
font-size: 13px;
color: #5a4828;
font-style: italic;
margin-top: 1px;
}
.ringd-section-head {
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8a7050;
margin-bottom: 12px;
font-weight: 400;
}
.ringd-list {
list-style: none;
margin: 0;
padding: 0;
}
.ringd-list li {
font-size: 15px;
color: #3a2c18;
line-height: 1.9;
border-bottom: 1px dashed rgba(180, 160, 120, 0.15);
display: flex;
align-items: baseline;
gap: 6px;
}
.ringd-list li:last-child { border-bottom: none; }
.ringd-qty {
color: #a09070;
font-size: 13px;
font-style: italic;
min-width: 110px;
flex-shrink: 0;
}
.ringd-t {
position: relative;
display: inline-block;
cursor: help;
}
.ringd-name {
border-bottom: 1px dotted rgba(140, 100, 40, 0.4);
transition: color .15s, border-color .15s;
color: #3a2c18;
}
.ringd-t:hover .ringd-name {
color: #8a5020;
border-bottom-color: rgba(138, 80, 32, 0.6);
}
.ringd-tip {
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(6px);
z-index: 200;
width: 240px;
background: #fff;
border: 1px solid rgba(180, 160, 120, 0.3);
border-radius: 4px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow: 4px 6px 22px rgba(80, 60, 20, 0.15);
overflow: hidden;
text-align: left;
font-family: 'Inter', system-ui, sans-serif;
}
.ringd-t:hover .ringd-tip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
.ringd-tip-head {
background: #f8f2e6;
padding: 11px 13px;
border-bottom: 1px solid rgba(180, 160, 120, 0.2);
}
.ringd-ing-name {
font-family: Georgia, serif;
font-size: 14px;
font-style: italic;
color: #3a2c18;
margin-bottom: 2px;
}
.ringd-ing-type {
font-size: 9.5px;
color: #a09070;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ringd-nutrition {
padding: 10px 13px;
border-bottom: 1px solid rgba(180, 160, 120, 0.12);
}
.ringd-nut-title {
font-size: 8.5px;
color: #b0a080;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ringd-nut-row {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
font-size: 10.5px;
}
.ringd-nut-name { color: #7a6a50; }
.ringd-nut-val {
color: #5a4828;
font-family: Georgia, serif;
font-style: italic;
}
.ringd-bar-wrap {
height: 2px;
background: rgba(180, 160, 120, 0.15);
border-radius: 1px;
margin: 2px 0 6px;
overflow: hidden;
}
.ringd-bar {
height: 100%;
border-radius: 1px;
background: linear-gradient(to right, #c8a060, #e8c080);
}
.ringd-subs {
padding: 10px 13px;
border-bottom: 1px solid rgba(180, 160, 120, 0.12);
}
.ringd-subs-title {
font-size: 8.5px;
color: #b0a080;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ringd-sub {
font-size: 10.5px;
color: #7a6a50;
margin-bottom: 4px;
padding-left: 9px;
position: relative;
}
.ringd-sub::before {
content: '→';
position: absolute;
left: 0;
color: #c8a060;
font-size: 9px;
}
.ringd-note {
padding: 10px 13px;
font-size: 9.5px;
font-style: italic;
color: #9a8a68;
line-height: 1.5;
font-family: Georgia, serif;
}