NODEDC_LAUNCHER/dc-ui-guideline/components/service-rail-card.json

40 lines
1.3 KiB
JSON

{
"id": "service-rail-card",
"name": "ServiceRailCard",
"kind": "component",
"status": "draft-stable",
"summary": "Bottom launcher rail item made from a square media tile and separate glass description tile with an attached circular arrow action.",
"sourceRefs": [
{
"project": "nodedc_launcher",
"file": "src/widgets/service-rail/ServiceRail.tsx"
},
{
"project": "nodedc_launcher",
"file": "src/styles/globals.css",
"classes": ["service-rail", "service-rail-card", "service-rail-card__media", "service-rail-card__body"]
}
],
"anatomy": [
"rail glass strip with ambient media under blur",
"service card group",
"square media tile",
"separate square body tile",
"status pill",
"circular arrow action"
],
"layoutContract": [
"One service centers in the rail.",
"Two services divide available rail into three equal gaps.",
"Three services divide into five equal gaps.",
"When gaps would become smaller than one tile size, horizontal scroll starts."
],
"rules": [
"Media and body tiles are separated by a small seam gap.",
"Both tiles have four rounded corners.",
"Tiles touch rail vertical bounds from top to bottom after rail padding rules.",
"The arrow action can select/open the service card."
]
}