All examples / Component family
Result cards
Thumbnail, metadata, overflow action and sponsored variation.
Live component context
search-result-card
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
thumbnailduration or live badgetitlechannel identitymetadatadescriptionoverflow action
Isolated specimen
Product context
Open search recipe · API and source trace
Reconstructed local contract. Its source appearance and local behavior have different authority. Interactive account boundaries never perform remote writes.
| root | [data-denominator="search-result-card"] |
|---|---|
| selectors | .results .result .thumb .duration .overflow |
| authority | reconstructed local contract |
| inputs | overflow trigger menu choice |
| defaults | menu: closed result: visible |
| events | click More click Not interested click Save |
| outputs | menu role=menu opens Not interested hides local card Save opens public sign-in boundary |
| focus | Opened menu receives focus on its first menu item. |
| errors | authenticated save is intentionally blocked by the sign-in boundary |
| motion | No scripted animation. |
| invariants | thumbnail is a link overflow state is owned by its card |
| stateOwnership | data-action and ARIA state are owned by site/examples/product.js. CSS ownership is site/examples/product.css followed by site/examples/control-overrides.css. A state without an implemented matching denominator is explicitly unverified. |
| responsiveOwnership | @media (max-width:900px) and @media (max-width:560px) in site/examples/product.css |
| semantics | Use native button, input, form, link, dialog, tablist, and tab semantics when the part is interactive. Preserve the captured aria-* state on the control that owns the action. |
Variants and content
standard
sponsored
live
mix
original long-title robustness fixture
original Arabic RTL robustness fixture
original missing-media robustness fixture
Keep parent-owned gaps outside the component. Preserve per-side padding and text line boxes; use the rule’s responsive condition before copying a single measured width. Source selectors ytd-video-renderer, ytd-thumbnail-overlay-time-status-renderer.
Measured local geometry at 390 px
| root | .result342 × 204.5625 px; border-box; grid / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| control-search-28 | #control-search-28240 × 135 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-1 | .result img240 × 135 px; border-box; inline / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| h2-2 | .result h250 × 45 px; border-box; flow-root / static margin top/right/bottom/left: 0px / 36px / 4px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-3 | .result p86 × 78.375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-4 | .result p86 × 39.1875 px; border-box; flow-root / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-search-29 | #control-search-2940 × 40 px; border-box; block / absolute margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-6 | .result img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
Probe evidence/local-contracts/examples_search.html-390.json. This measures the actual local recipe, not the documentation frame.
Measured local geometry at 1440 px
| root | .result1152 × 281.25 px; border-box; grid / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| control-search-28 | #control-search-28500 × 281.25 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-1 | .result img500 × 281.25 px; border-box; inline / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| h2-2 | .result h2600 × 22.5 px; border-box; block / static margin top/right/bottom/left: 0px / 36px / 4px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-3 | .result p636 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-4 | .result p636 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-search-29 | #control-search-2940 × 40 px; border-box; block / absolute margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-6 | .result img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
Probe evidence/local-contracts/examples_search.html-1440.json. This measures the actual local recipe, not the documentation frame.
Retrieve base CSS, cascade corrections, and behavior. Use these together. Avoid replacing the recorded glyph with text or inventing a success state for a private operation.