Work Experience

Open source

A résumé/CV work-history section — a vertical list of roles, each with the company mark, job title, dates and a short summary.

Add to page builder

resources/views/blocks/work-experience.blade.php Blade

@props([
    'eyebrow' => 'Career',
    'heading' => 'Work experience',
    'subheading' => 'A decade of building products people rely on every day.',
    'roles' => [],
])

@php
    // Work Experience 01 — a résumé/CV work-history section: a vertical list of
    // roles, each with the company mark (avatar), job title, company, a date-range
    // badge, and a short summary. Distinct from about-timeline (company
    // milestones) and careers (open postings). Composes the avatar + badge
    // primitives; tokens only; mirrors under RTL via logical properties.
    $roles = ! empty($roles) ? $roles : [
        [
            'title' => 'Principal Product Engineer',
            'company' => 'Northwind Labs',
            'period' => '2022 — Present',
            'current' => true,
            'logo' => 'NL',
            'summary' => 'Lead the design systems guild; shipped a token-driven UI platform now used across every product surface.',
        ],
        [
            'title' => 'Senior Frontend Engineer',
            'company' => 'Harbour & Co.',
            'period' => '2019 — 2022',
            'logo' => 'HC',
            'summary' => 'Rebuilt the checkout flow, lifting conversion 18% and cutting time-to-interactive by half.',
        ],
        [
            'title' => 'Frontend Engineer',
            'company' => 'Lumen Studio',
            'period' => '2016 — 2019',
            'logo' => 'LS',
            'summary' => 'Delivered the first component library and migrated three flagship apps onto it.',
        ],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-3xl px-4">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-base text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        <x-ui.timeline :alternating="false" no-cards :vert-item-max-width="0" class="mt-12">
            @foreach ($roles as $role)
                <x-ui.timeline.item>
                    <div class="flex items-start gap-4">
                        <x-ui.avatar :fallback="$role['logo'] ?? ''" class="hidden size-11 shrink-0 sm:flex" />

                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                <h3 class="text-base font-semibold text-foreground">{{ __($role['title'] ?? '') }}</h3>
                                @if (! empty($role['current']))
                                    <x-ui.badge variant="secondary">{{ __('Current') }}</x-ui.badge>
                                @endif
                            </div>
                            <p class="mt-0.5 text-sm font-medium text-muted-foreground">
                                {{ __($role['company'] ?? '') }}@if (! empty($role['period'])), {{ $role['period'] }}@endif
                            </p>
                            @if (! empty($role['summary']))
                                <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ __($role['summary']) }}</p>
                            @endif
                        </div>
                    </div>
                </x-ui.timeline.item>
            @endforeach
        </x-ui.timeline>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/work-experience

Installs these dependencies automatically:

avatar badge section timeline

Registry contract

Install confidence

php artisan ui:add blocks/work-experience writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.6
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/work-experience.blade.php

Registry dependencies

avatar badge section timeline

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

work-experience.md

# Brok UI block: Work Experience (`work-experience`)

A résumé/CV work-history section: a vertical list of roles, each with the company mark, job title, company, a date-range, and a short summary.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/work-experience
```

## Render it

```blade
<x-blocks.work-experience />
```

## Props

- `eyebrow` (string, default `Career`) — Small label shown above the heading.
- `heading` (string, default `Work experience`) — Section heading.
- `subheading` (string, default `A decade of building products people rely on every day.`) — Supporting copy under the heading.
- `roles` (array, default `[]`) — Role entries with title, company, period, current flag, logo initials and summary; empty falls back to sample data.

## Use when

- Listing a résumé or CV work history as a vertical timeline of roles with company, dates and a summary.
- Using it on a personal portfolio or resume page.

## Avoid when

- Listing company milestones rather than a person's job history; use an about-timeline style block instead.

## Rules

- Render the installed block with `<x-blocks.work-experience />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/work-experience
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/work-experience.json

Ask about Work Experience in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Listing a résumé or CV work history as a vertical timeline of roles with company, dates and a summary.
Using it on a personal portfolio or resume page.

Avoid when

Listing company milestones rather than a person's job history; use an about-timeline style block instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.work-experience />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.