0.2.2 alpha

Menu

Project card

ExperimentalGet the Figma fileBlock

One project at a glance: its stage in words, three figures, its recent work and how many places are taken.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.

Examples

Usage

Live: the success badge, three figures, the work of the last weeks, and one of two agent places taken.

Studio Norte website

studionorte.pt

Live
Issues
18
Pull Requests
2
Release
0.1.3
updated 2 h ago

Building

Building: the info badge, and both places taken.

Studio Norte shop

shop.studionorte.pt

Building
Issues
31
Pull Requests
4
Release
None yet
updated 2 h ago

Paused

Paused: the gray badge, a steady line, and both places free.

Studio Norte blog

blog.studionorte.pt

Paused
Issues
6
Pull Requests
0
Release
1.2
updated 5 days ago

Idea

An idea: no card yet, a sunken box with a dashed edge, and a line saying what it waits for.

Studio Norte booking

Not built yet

Idea

An idea, not built yet. One decision waits for you before it can start.

noted Oct 3

In a grid

Projects side by side, as many as the room allows; an idea sits among them as a box still to fill.

Studio Norte website

studionorte.pt

Live
Issues
18
Pull Requests
2
Release
0.1.3
updated 2 h ago

Studio Norte booking

Not built yet

Idea

An idea, not built yet. One decision waits for you before it can start.

noted Oct 3

Built from

Guidelines

Purpose

Shows one project on an overview: its name and address, its stage, three figures a reader checks first, how busy it has been lately and how many of its places are taken. Four stages: live, building, paused and an idea.

When to use

  • On an overview of projects, where a reader checks which are live, which are moving and which wait.

When not to use

  • For one project's whole story. Use its own page, with these figures at its top.
  • For a long list of projects. Use a table.

Usage rules

Do

  • Choose figures that answer the reader's first question about a project.
  • Keep an idea in the same grid as the projects that are built.

Don't

  • Show the stage by the badge's color alone.
  • Draw an idea as a card: it has nothing to measure yet.

Anatomy

  • The card, the Card component in its compact layout, its slot body holding the rest.
  • The top line: the project's mark, its initials on a small dark square; its name in the large label style over its address; its stage as a small badge.
  • The figures: three names in the extra small body style, each over its figure in the large label style.
  • The line, the Sparkline component, of its work over the last weeks, with a summary in words.
  • The footer, under a quiet line: the places taken, the Capacity meter component, and when it last changed.
  • An idea is not a card yet: a sunken box with a dashed edge, the top line, a line saying what it waits for, and the footer.

Behavior

The page sets the stage: the badge and its words, and for an idea the dashed box in place of the card. The card takes no focus; to open a project from it, put a link in its title.

Accessibility

What it does for you

  • The card is an article named by its title.
  • The stage is said in words in the badge.
  • The figures are a description list: each name is the term and its figure the detail.
  • The places are a meter, its value in words.
  • The mark is hidden from assistive technology, since the title names the project.

What you must do

  • Make the title a heading at the level the page needs.
  • Give the line a summary in words, such as "Work over the last 12 weeks, rising"; without one, hide it.
  • Name the places for what they count, such as "Agent places".

How to test

  • With a screen reader, each card is read as an article by its title, then its stage, its figures as names and values, the line's summary and the places taken.
  • In a forced-color mode, the stage still reads in the badge's words.

Source

The project card's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.

Stylesheet
project-card.css
/* site-project-card — Project card, a block: one project at a glance, its stage in words, three figures, how busy
 * it has been and how many of its places are taken. Copy it into your project and rename site- to your project's
 * own prefix. Live, building and paused are the Card component in its compact layout, with the Badge, Sparkline
 * and Capacity meter inside; the block draws only the lines inside the card's body and the footer's line. An idea
 * is not a card yet: the block draws it as a sunken box with a dashed edge, which no component has. */

.site-project-card__top,
.site-project-card__footer {
  display: flex;
  align-items: center;
}

.site-project-card__top {
  gap: var(--smbk-space-inline-md);
}

/* The project's mark: its initials on a small dark square. */
.site-project-card__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--smbk-size-40);
  height: var(--smbk-size-40);
  border-radius: var(--smbk-radius-control-md);
  background: var(--smbk-color-surface-inverse);
  color: var(--smbk-color-text-inverse);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

.site-project-card__name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
}

.site-project-card__title,
.site-project-card__figure {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.site-project-card__address,
.site-project-card__label,
.site-project-card__time {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

.site-project-card__status {
  flex: none;
}

/* Three figures side by side, each a name over its figure. */
.site-project-card__facts {
  display: flex;
  gap: var(--smbk-space-inline-md);
  margin: 0;
}

.site-project-card__fact {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
}

.site-project-card__figure {
  font-variant-numeric: tabular-nums;
}

/* The footer: a quiet line above it, the same room above and below the line, the places at the start and when it
   last changed at the end. */
.site-project-card__footer {
  gap: var(--smbk-space-inline-sm);
  padding-block-start: var(--smbk-space-inset-lg);
  border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.site-project-card__time {
  margin-inline-start: auto;
  text-align: end;
}

/* An idea: no card yet, a sunken box with a dashed edge, as the card's compact layout spaces it. */
.site-project-card--stage-idea {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  padding: var(--smbk-space-inset-lg);
  border: var(--smbk-border-width-hairline) dashed var(--smbk-color-border-strong);
  border-radius: var(--smbk-radius-container-md);
  background: var(--smbk-color-surface-sunken);
}

.site-project-card__summary {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}