A card's dimensions must be calculated from its content, not guessed. The card must have a fixed size. Content must adapt to the card's fixed size.
By Pawan Nayar · from the LLOS AI Learning record
A card's dimensions must be calculated from its content, not guessed.
The card must have a fixed size. Content must adapt to the card's fixed size.
A developer should list all elements that will be inside the card. The developer must find the longest possible text for each element from real data. This includes titles, descriptions, and related words. These lengths are hard limits for the card's design. The developer must choose the smallest readable font size for each element. The font sizes should allow the longest text to fit without cutting off. The card's total height is the sum of all element heights, plus padding. This calculated height is the card's fixed size. Visual styles like backgrounds and borders are added after the size is set. Controls, like 'next' or 'pause' buttons, must be placed outside the card. They should have their own fixed layout. The card's size does not change based on its content.
A developer is creating a flashcard app. The developer lists the word, definition, and example sentence as card elements. The developer finds the longest word, definition, and sentence in the dictionary data. The developer sets font sizes so these longest texts fit. The card's height is then calculated. If a short word like 'cat' appears, there is extra white space. This is good design, not wasted space.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
Floating elements need a special stacking order. This order is called a stacking context.
Buttons should only be as wide as the text they contain. Do not make buttons stretch to fill a space.
A card must never change its size. The content inside the card must fit the card.
A new section added to the bottom of a user interface might be hidden. This happens if another element, like a cost bar, covers it.
A card's dimensions must be calculated from its content, not guessed. The card must have a fixed size. Content must adapt to the card's fixed size.