Skip to content
Jaringan

Network · member-card

Member card

Kepengurusan is laid out as the network's lines: each division is a section with its badge, a route in its color, then its people. Portraits are raw photos; names, roles and campuses are live text.

Lead

For BPH's Ketua and Wakil: a larger portrait beside the name in type-display-lg, the role, campus and a short quote. Without a photo, the portrait shows initials. Names and quotes are illustrative.

Preview

Chair

Nadia Putri Rahman

CUHK-Shenzhen香港中文大学（深圳）
One network means nobody goes it alone, whichever campus you come from.
Show code
<MemberLead member={ketua} media={<Image src={ketua.photo} alt="" … />} />

A division line

The L4 section: header with line badge, full name and one-sentence purpose, a route in the division color, then a grid of 2 to 4 columns. Each card's tiny station is the division color; its label is the campus.

Preview
Hubungan Masyarakat

Hubungan Masyarakat

Menjaga hubungan dengan kampus, KJRI dan mitra, dan memastikan kabar sampai ke semua anggota.

Raka Pratama

Head of division

SUSTech南方科技大学

Aulia Safitri

Deputy head

CUHK-Shenzhen香港中文大学（深圳）

Bima Saputra

Staff

PKU Shenzhen北京大学深圳研究生院

Citra Lestari

Staff

Tsinghua SIGS清华大学深圳国际研究生院

Fajar Nugroho

Staff

CUHK-Shenzhen香港中文大学（深圳）

Gita Maharani

Staff

SZU深圳大学
Show code
<section data-line="humas" aria-labelledby="humas">
  <LineBadge code="humas" />
  <h2 id="humas">Hubungan Masyarakat</h2>
  <Route />
  <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
    {members.map((m) => <MemberCard key={m.name} member={m} media={…} />)}
  </div>
</section>

List

Text-only rows for large divisions or past cabinets.

Preview

  • Raka Pratama

    Head of division

    SUSTech南方科技大学

  • Aulia Safitri

    Deputy head

    CUHK-Shenzhen香港中文大学（深圳）

  • Bima Saputra

    Staff

    PKU Shenzhen北京大学深圳研究生院

  • Citra Lestari

    Staff

    Tsinghua SIGS清华大学深圳国际研究生院
Show code
<MemberList members={members} />

Rules

  • Order: head, then deputy, then staff alphabetically. Divisions: BPH, then DANUS, DEPOL, HUMAS, IT, MEDKREF, PKA, SOSBUD.
  • The name is an h3 under the division's h2. Photos use alt="" because the name follows.
  • Not clickable. The optional Instagram icon button is labeled “Instagram {Name}”.

Don’t

Committee posters with name and position typeset into the image.

Do

Raw 4:5 portraits, with name, role, campus and line as HTML.