Info Card — Control-F Design System

The card

On the ground, which is where it belongs. The lattice is still there — softened, not hidden, which is the difference between glass and a scrim.

01 / 04

Maschinenbau

Rotierende Assets

Drehzahl, Schwingung, Temperatur, Druck: rotierende Maschinen erzeugen die dichtesten Telemetriedaten im ganzen Portfolio, oft im Millisekundentakt und über Jahre hinweg.

Frage

Welche Einheit läuft aus dem Muster — und seit wann?

Signale

Drehzahl
Schwingung
Lagertemperatur

Assets

Motoren
Gasturbinen
Generatoren

<article class="cf-info-card cf-info-card--glass">
  <p  class="cf-info-card__count t-label">01 / 04</p>
  <h3 class="cf-info-card__title text-foil text-foil--ink">Maschinenbau</h3>
  <p  class="cf-info-card__sub t-label">Rotierende Assets</p>
  <p  class="cf-info-card__body">…</p>
  <p  class="cf-info-card__ask-tag">Frage</p>
  <p  class="cf-info-card__ask">Welche Einheit läuft aus dem Muster?</p>
  <div class="cf-info-card__facts tiles tiles--fit">
    <div>
      <p class="cf-info-card__label t-label">Signale</p>
      <ul class="cf-info-card__chips" role="list">
        <li>Drehzahl</li>…
      </ul>
    </div>
  </div>
</article>

Every part is optional except the card. A count with no facts, a title with a paragraph and nothing else, facts with one column — all of them are the same component with fewer children, because the spacing is declared on the parts rather than between them.

The material is a modifier

The base card is layout, type and a plain surface. .cf-info-card--glass replaces that surface with the material, and it is a modifier rather than the default for two reasons that turned out to be the same reason.

Glass exists to calm a complex graphic beneath it, never to sit on a flat surface. That is the material's own rule, in one line, from Materials. Add --glass to a card that stands on the ground, on an illustration, on anything the reader can still see through it. Add it over a flat --surface-page and it is only a grey box — and the base card, which has a border, is what you wanted.

And the budget has to be legible from the markup. The first version of this component was glass unconditionally, and Expertise turned the material off again in its own stylesheet for the four cards that did not need it. check-glass-budget.py counted that as six blurred layers on a two-layer page, and it was right twice over: it reads the HTML rather than resolving the cascade, because a census with an unstated exception in it is worse than no census — and a class that says I am glass with a page-local rule saying except here is the drift these scripts exist to stop. Carry the modifier where the material is spent.

The same card with --glass, on nothing:

01 / 04

Maschinenbau

No lattice under it, so no material — a grey box with a pale rim, which is what the rule above is describing rather than warning about.

Bearing glass, and its floor

Text sits directly on this card, so it takes --surface-glass — the bearing tint, whose 46 % white is the floor at which black type still clears 4.5:1 composited over a pure black backdrop. The measurement and the reason that value has almost no room to move are both in tokens.css, section 9. Veil glass is the other tint and it is not this: it carries nothing but opaque objects.

Which tint depends on what is behind the pane. The default is --surface-glass, the floor for a backdrop nobody controls. A page that can name its backdrop can set --info-card-tint to --surface-glass-thin and let more of it through — Expertise does, because what is behind its plate is the system's own lattice on the wash.

Measured on the shipping card at the thin tint, over the lattice at stage size: the plate composites to rgb(228, 229, 230), and its darkest single pixel — a blurred lattice line — to rgb(220, 221, 223). Against that worst pixel the body copy reads 6.73:1, the five stops of the ink foil land between 6.01:1 and 9.78:1, and the ruled question 15.45:1. All of it better than the 5.24:1 the foil class guarantees on CF-Grau, because glass is lighter than CF-Grau.

There is no fallback to write. When the browser cannot blur, or the reader has asked for less transparency, tokens.css redefines --surface-glass to the opaque stand-in and the card goes to a solid plate with its contrast intact.

Count your blurred layers

A page may carry one of these frosted. The system allows exactly two blurred layers on a page and the navigation band is always one of them. That is a measured budget, not a stylistic one — see the note on --glass-blur. Anywhere a second card is wanted on the same screen, the second one is not glass.

Expertise is the case that already came up, and its answer is worth copying. Four cards stacked in one grid area would have been four blurred layers, so the material is spent once — on a single empty .cf-info-card--glass under the copy column — and the four cards hand over on top of it as plain cards, giving up only their own opaque back so the plate shows through. One lectern, changing copy, which is also the better drawing: a lectern does not change when the page on it does. Below the enhancement threshold the plate is display: none and the four are ordinary bordered cards, so the census counts what is actually drawn on either path.

The title takes the foil

.text-foil--ink on the title is what puts colour in the card, and it is authored on the element rather than baked into the component. That is deliberate: the one-foil-moment-per-screen budget is a fact about the screen, and a component cannot know how many of itself are on one. The card styles the title; the page decides whether it iridesces.

Ink, never the lit half. This surface is light. .text-foil on its own is the light-on-dark ramp and lands between 1.1:1 and 1.5:1 here. .text-foil--ink is the one that belongs on glass.

04 / 04

Flotten

Viele gleiche Assets

The ramp runs Glas 800 → Sky 800 → Violett 800 across the letterforms, on the same 116.57° rake every foil in the system uses, and it swings with the reader — see Sight.

Rules

--glass on a graphic, never on a flat surface. The material's own rule, and the one that decides whether the modifier belongs.
One --glass per page. The navigation band is the other blurred layer, and check-glass-budget.py counts the modifier off the markup. A second card on the same page is a plain card.
Ink foil on the title, at most one per screen. Never .text-foil on its own here — this surface is light.
Glass is not outlined. The modifier's perimeter is --glass-border, a lit rim, and its top edge carries the same one pixel of Weiss → Glas → Sky that .cf-nav::after and .cf-btn--glass end at. A black line round a glass plate is the first thing anybody sees.
And the rim is lit by the reader, not by a timer. --glass-rim-light rides over that pixel parked off the left edge, and crosses once as the card passes through the viewport — scrubbed by position, so it tracks the reader's hand and runs backwards on the way up. This is the same construction the other two frosted surfaces already used, and until now this was the only one of the three that did not move: the nav's band crosses the document, the hero button's answers the pointer, and this one answers the only thing a card the reader cannot click has to answer, which is being moved past. On the light and on the rim rather than on the sheet — sliding anything across a blurred layer re-rasterises its blur every frame, which is a rule scripts/check-glass-budget.py enforces rather than merely states.
The question opens with a label rule, not a bar down its left side. A second box inside a card is a card inside a card, so the question is not boxed — but the rule that replaces the box has to be one the system allows. A bar beside a block is none of the three uses in Where a line may go: it is not an edge, nothing is on its far side, and it carries no label. The mono tag with the hairline running out of it is the same device .cf-section-header and .cf-prose__note use, and it says what the block is instead of only that it is different.
The chips are the card's. They are not a global chip and should not become one until a component that is not this needs them.

Where it is used

Expertise — four of them, one per field, handing over on a single hoisted plate as the track scrolls.
Nowhere else yet. The scroll study at prototypes/expertise-scroll.html carries the same track and the same build, but not this card: it is a study about pacing, and giving it a second glass surface would have been a third blurred layer for nothing.