Skip to content
Brok UI

Loading…

No results

Careers

Open source

A careers section — a culture blurb and perk badges above a divided list of open roles grouped by department.

Add to page builder

Preview

resources/views/blocks/careers.blade.php Blade 
@props([
    'eyebrow' => 'Careers',
    'heading' => 'Open roles',
    'subheading' => 'We are a small, senior team that ships fast and sweats the details. If that sounds like you, come build with us.',
    'perks' => null,
    'roles' => null,
])

@php
    $perks ??= [
        'Remote-first',
        'Equity for everyone',
        '4-day release weeks',
        'Annual learning budget',
        'Paid sabbaticals',
    ];

    $roles ??= [
        [
            'title' => 'Senior Frontend Engineer',
            'department' => 'Engineering',
            'location' => 'Remote (Worldwide)',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Backend Engineer, Platform',
            'department' => 'Engineering',
            'location' => 'San Francisco, CA',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Product Designer',
            'department' => 'Design',
            'location' => 'Remote (EU)',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Design Systems Contractor',
            'department' => 'Design',
            'location' => 'Remote (Worldwide)',
            'type' => 'Contract',
            'href' => '#',
        ],
        [
            'title' => 'Developer Advocate',
            'department' => 'Marketing',
            'location' => 'New York, NY',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Growth Marketing Intern',
            'department' => 'Marketing',
            'location' => 'Remote (US)',
            'type' => 'Internship',
            'href' => '#',
        ],
    ];

    // Map employment type → badge variant. Keys are full class-equivalent variant
    // names so no variable is spliced into a Tailwind class.
    $typeVariants = [
        'Full-time' => 'default',
        'Contract' => 'secondary',
        'Internship' => 'outline',
    ];

    // Group roles by department, preserving first-seen order.
    $grouped = [];
    foreach ($roles as $role) {
        $grouped[$role['department']][] = $role;
    }
@endphp

<x-ui.section
    data-slot="careers"
    aria-labelledby="careers-01-heading"
    space="xl" {{ $attributes }}
>
    <x-ui.container size="md" gutter="sm">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 id="careers-01-heading" class="mt-4 text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        @if (! empty($perks))
            <ul role="list" class="mt-6 flex flex-wrap gap-2">
                @foreach ($perks as $perk)
                    <li>
                        <x-ui.badge variant="secondary" size="md">{{ __($perk) }}</x-ui.badge>
                    </li>
                @endforeach
            </ul>
        @endif

        <div class="mt-12 space-y-10 sm:mt-16">
            @foreach ($grouped as $department => $departmentRoles)
                <div>
                    <h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($department) }}</h3>

                    <x-ui.card class="mt-4 overflow-hidden p-0">
                        <ul role="list">
                            @foreach ($departmentRoles as $i => $role)
                                @if ($i > 0)
                                    <x-ui.separator />
                                @endif
                                <li class="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-6">
                                    <div class="min-w-0">
                                        <h4 class="truncate text-sm font-semibold text-foreground">{{ __($role['title']) }}</h4>
                                        <dl class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Department') }}</dt>
                                                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <rect x="2" y="7" width="20" height="14" rx="2" />
                                                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                                                </svg>
                                                <dd>{{ __($role['department']) }}</dd>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Location') }}</dt>
                                                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <path d="M20 10c0 4.418-8 12-8 12s-8-7.582-8-12a8 8 0 0 1 16 0Z" />
                                                    <circle cx="12" cy="10" r="3" />
                                                </svg>
                                                <dd>{{ $role['location'] }}</dd>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Employment type') }}</dt>
                                                <dd>
                                                    <x-ui.badge :variant="$typeVariants[$role['type']] ?? 'outline'" size="sm">{{ __($role['type']) }}</x-ui.badge>
                                                </dd>
                                            </div>
                                        </dl>
                                    </div>

                                    <div class="shrink-0">
                                        <x-ui.button
                                            variant="outline"
                                            size="sm"
                                            :href="$role['href']"
                                            with-arrow
                                            :aria-label="__('Apply for :role', ['role' => $role['title']])"
                                            class="w-full sm:w-auto"
                                        >
                                            {{ __('Apply') }}
                                        </x-ui.button>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </x-ui.card>
                </div>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal 
php artisan ui:add blocks/careers

Installs these dependencies automatically:

badge button card container section separator

Registry contract

Install confidence

php artisan ui:add blocks/careers 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.4
License
open
Stability
stable
Contract
v1
Foundation
≥ 1.0.0
Type Generated target
blade resources/views/blocks/careers.blade.php

Registry dependencies

badge button card container section separator

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.

careers.md 
# Brok UI block: Careers (`careers`)

A careers section with a culture blurb, perk badges, and a divided list of open roles grouped by department, each showing department/location/type meta and an Apply button.

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/careers
```

## Render it

```blade
<x-blocks.careers />
```

## Props

- `eyebrow` (string, default `Careers`)
- `heading` (string, default `Open roles`)
- `subheading` (string, default `We are a small, senior team that ships fast and sweats the details. If that sounds like you, come build with us.`)
- `perks` (mixed|null, default `null`)
- `roles` (mixed|null, default `null`)

## Use when

- Listing open roles grouped by department, each with location and type meta and an Apply button.
- Leading the section with a culture blurb and perk badges (remote-first, equity, sabbaticals) above the role list.

## Avoid when

- Use community for community channels rather than job listings; careers is specifically for hiring.

## Rules

- Render the installed block with `<x-blocks.careers />` 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/careers
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/careers.json
Ask about Careers 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 open roles grouped by department, each with location and type meta and an Apply button.
  • Leading the section with a culture blurb and perk badges (remote-first, equity, sabbaticals) above the role list.

Avoid when

  • Use community for community channels rather than job listings; careers is specifically for hiring.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade 
<x-blocks.careers />

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.

resources/views/blocks/careers.blade.php Blade 
@props([
    'eyebrow' => 'Careers',
    'heading' => 'Open roles',
    'subheading' => 'We are a small, senior team that ships fast and sweats the details. If that sounds like you, come build with us.',
    'perks' => null,
    'roles' => null,
])

@php
    $perks ??= [
        'Remote-first',
        'Equity for everyone',
        '4-day release weeks',
        'Annual learning budget',
        'Paid sabbaticals',
    ];

    $roles ??= [
        [
            'title' => 'Senior Frontend Engineer',
            'department' => 'Engineering',
            'location' => 'Remote (Worldwide)',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Backend Engineer, Platform',
            'department' => 'Engineering',
            'location' => 'San Francisco, CA',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Product Designer',
            'department' => 'Design',
            'location' => 'Remote (EU)',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Design Systems Contractor',
            'department' => 'Design',
            'location' => 'Remote (Worldwide)',
            'type' => 'Contract',
            'href' => '#',
        ],
        [
            'title' => 'Developer Advocate',
            'department' => 'Marketing',
            'location' => 'New York, NY',
            'type' => 'Full-time',
            'href' => '#',
        ],
        [
            'title' => 'Growth Marketing Intern',
            'department' => 'Marketing',
            'location' => 'Remote (US)',
            'type' => 'Internship',
            'href' => '#',
        ],
    ];

    // Map employment type → badge variant. Keys are full class-equivalent variant
    // names so no variable is spliced into a Tailwind class.
    $typeVariants = [
        'Full-time' => 'default',
        'Contract' => 'secondary',
        'Internship' => 'outline',
    ];

    // Group roles by department, preserving first-seen order.
    $grouped = [];
    foreach ($roles as $role) {
        $grouped[$role['department']][] = $role;
    }
@endphp

<x-ui.section
    data-slot="careers"
    aria-labelledby="careers-01-heading"
    space="xl" {{ $attributes }}
>
    <x-ui.container size="md" gutter="sm">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 id="careers-01-heading" class="mt-4 text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        @if (! empty($perks))
            <ul role="list" class="mt-6 flex flex-wrap gap-2">
                @foreach ($perks as $perk)
                    <li>
                        <x-ui.badge variant="secondary" size="md">{{ __($perk) }}</x-ui.badge>
                    </li>
                @endforeach
            </ul>
        @endif

        <div class="mt-12 space-y-10 sm:mt-16">
            @foreach ($grouped as $department => $departmentRoles)
                <div>
                    <h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($department) }}</h3>

                    <x-ui.card class="mt-4 overflow-hidden p-0">
                        <ul role="list">
                            @foreach ($departmentRoles as $i => $role)
                                @if ($i > 0)
                                    <x-ui.separator />
                                @endif
                                <li class="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-6">
                                    <div class="min-w-0">
                                        <h4 class="truncate text-sm font-semibold text-foreground">{{ __($role['title']) }}</h4>
                                        <dl class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Department') }}</dt>
                                                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <rect x="2" y="7" width="20" height="14" rx="2" />
                                                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                                                </svg>
                                                <dd>{{ __($role['department']) }}</dd>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Location') }}</dt>
                                                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <path d="M20 10c0 4.418-8 12-8 12s-8-7.582-8-12a8 8 0 0 1 16 0Z" />
                                                    <circle cx="12" cy="10" r="3" />
                                                </svg>
                                                <dd>{{ $role['location'] }}</dd>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <dt class="sr-only">{{ __('Employment type') }}</dt>
                                                <dd>
                                                    <x-ui.badge :variant="$typeVariants[$role['type']] ?? 'outline'" size="sm">{{ __($role['type']) }}</x-ui.badge>
                                                </dd>
                                            </div>
                                        </dl>
                                    </div>

                                    <div class="shrink-0">
                                        <x-ui.button
                                            variant="outline"
                                            size="sm"
                                            :href="$role['href']"
                                            with-arrow
                                            :aria-label="__('Apply for :role', ['role' => $role['title']])"
                                            class="w-full sm:w-auto"
                                        >
                                            {{ __('Apply') }}
                                        </x-ui.button>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </x-ui.card>
                </div>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.0.4
Status
Stable
License
open
Deprecation
Not deprecated
Contract
v1
Foundation
≥ 1.0.0