Hero

Open source

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

Add to page builder

11 of 15

resources/views/blocks/hero-profile.blade.php Blade

@props([
    'avatarSrc' => null,
    'avatarFallback' => 'RA',
    'name' => 'Rusty Adler',
    'heading' => 'Software engineer, adventurer, and tech entrepreneur.',
    'bio' => "I'm Rusty, a software engineer turned founder, helping organizations unlock their potential through thoughtful technology solutions.",
    'primaryCta' => 'Get in touch',
    'primaryHref' => '#',
    'secondaryCta' => 'View work',
    'secondaryHref' => '#',
    'socials' => null,
])

@php
    // A personal / portfolio bio hero: a profile avatar, a headline, a short bio,
    // primary + secondary actions and a row of social links. Composes the avatar,
    // button and social-links primitives.
    $socials ??= [
        ['platform' => 'x', 'label' => 'Follow on X', 'href' => '#'],
        ['platform' => 'github', 'label' => 'GitHub profile', 'href' => '#'],
        ['platform' => 'instagram', 'label' => 'Instagram profile', 'href' => '#'],
        ['platform' => 'linkedin', 'label' => 'LinkedIn profile', 'href' => '#'],
        ['platform' => 'facebook', 'label' => 'Facebook profile', 'href' => '#'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="sm" gutter="sm">
        <x-ui.avatar
            :src="$avatarSrc"
            :fallback="$avatarFallback"
            :alt="$name"
            size="xl"
            class="mb-8"
        />

        <h1 class="text-balance text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
            {{ __($heading) }}
        </h1>

        <p class="mt-6 max-w-xl text-pretty text-lg text-muted-foreground">
            {{ __($bio) }}
        </p>

        @if ($primaryCta || $secondaryCta)
            <div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center">
                @if ($primaryCta)
                    <x-ui.button size="lg" :href="$primaryHref">{{ __($primaryCta) }}</x-ui.button>
                @endif
                @if ($secondaryCta)
                    <x-ui.button size="lg" variant="outline" :href="$secondaryHref">{{ __($secondaryCta) }}</x-ui.button>
                @endif
            </div>
        @endif

        @if (! empty($socials))
            <x-ui.social-links :links="$socials" class="mt-8 -ms-2" label="Profile social links" />
        @endif
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/hero-profile

Installs these dependencies automatically:

avatar button container section social-links

Registry contract

Install confidence

php artisan ui:add blocks/hero-profile 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/hero-profile.blade.php

Registry dependencies

avatar button container section social-links

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.

hero-profile.md

# Brok UI block: Hero Profile (`hero-profile`)

A personal / portfolio bio hero — a profile avatar, headline, short bio, primary and secondary actions and a social-links row. Composes the avatar, button and social-links primitives.

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/hero-profile
```

## Render it

```blade
<x-blocks.hero-profile />
```

## Props

- `avatar-src` (mixed|null, default `null`) — Avatar image URL; null shows the fallback initials.
- `avatar-fallback` (string, default `RA`) — Initials shown when no avatar image is set.
- `name` (string, default `Rusty Adler`) — Accessible name used for the avatar's alt text.
- `heading` (string, default `Software engineer, adventurer, and tech entrepreneur.`) — Short headline shown under the avatar.
- `bio` (string, default `I'm Rusty, a software engineer turned founder, helping organizations unlock their potential through thoughtful technology solutions.`) — Supporting bio paragraph.
- `primary-cta` (string, default `Get in touch`) — Primary button label; falsy hides the primary button.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `View work`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `socials` (mixed|null, default `null`) — Rows of {platform, label, href} rendered as social-links icons; null falls back to a default 5-platform sample.

## Use when

- Opening a personal site, portfolio, or about page with a profile avatar, a short headline and bio, and a row of social-platform links.
- Wanting primary and secondary actions (e.g. contact, view work) beside the bio rather than a marketing CTA pair.

## Avoid when

- Building a product or company marketing page rather than a personal/portfolio one; use hero-centered or hero-split instead.

## Rules

- Render the installed block with `<x-blocks.hero-profile />` 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/hero-profile
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/hero-profile.json

Ask about Hero Profile 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

Opening a personal site, portfolio, or about page with a profile avatar, a short headline and bio, and a row of social-platform links.
Wanting primary and secondary actions (e.g. contact, view work) beside the bio rather than a marketing CTA pair.

Avoid when

Building a product or company marketing page rather than a personal/portfolio one; use hero-centered or hero-split instead.

Anti-patterns

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

Anatomy: avatar heading bio primary cta secondary cta social links row

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.hero-profile />

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.