Page History
...
- visibilityPolicySetId — Determines the visibility of the component based on specified policy sets. For example, setting to "customerOnlyPolicy" restricts the collection to authenticated customers only.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11550-252909&t=iosNC2AkSTGs5lMh-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id5/4-card/card-collection
Guidelines
[NO DATA AVAILABLE]
Accessibility
...
Usage
- Present a data-backed grid of items by binding a data source and mapping title/subtitle fields; ensure each card uses a stable unique key.
- Show a localized header when it adds context; hide it when redundant. Keep strings concise to avoid truncation.
- Use collapsed and expanded templates to control information density.
- Display a loader during fetches and a localized empty-state message when no results are returned.
- Provide stable testing hooks and, when used, localized guided-tour titles and descriptions.
Sizing & Layout
- Enable full-width grids and specify the column count for predictable scanning.
- Constrain height and enable internal scrolling to prevent page reflow.
- Use server pagination with a sensible page size for large datasets.
- Adjust surrounding spacing with the padding utility for clear breathing room.
Visibility & Authorization
- Gate visibility with policy sets when needed.
- Use conditional display rules to show the collection only in valid contexts.
Dos & Don’ts
| Do | Don’t |
|---|---|
| Give the component a meaningful display name for clear identification in the structure panel. | Leave a generic or misleading display name that obscures purpose. |
| Use the “first card loaded” event to start dependent logic after content appears. | Rely on timers or polling to guess when data is ready. |
| Choose a page size that aligns well with your column count (e.g., multiples) to avoid awkward partial rows. | Pick arbitrary page sizes that cut rows mid-scan. |
| Only set a column count when full-width grids are enabled (where the setting applies). | Set a column count while full-width is off, expecting it to affect layout. |
Accessibility
- The component exposes no ARIA- or focus-specific settings; rely on clear, plain-language text in templates and headers for screen-reader clarity.
- Avoid hover-only cues as the sole indicator of interactivity; ensure interactive content remains understandable without hover.
- Keep localized strings short and unambiguous to reduce cognitive load.
