Downloads

Open source

Resource/download lists — file-type rows with title, description, format/size meta and a download link.

resources/views/blocks/downloads-list.blade.php Blade

@props([
    'eyebrow'  => 'Resources',
    'heading'  => 'Downloads & Documents',
    'subcopy'  => 'Care guides, size charts and shipping details — everything you need, in one place.',
    'items'    => null,
])

@php
    $items ??= [
        [
            'title'       => 'Product Care Guide',
            'description' => 'How to clean, condition and store your leather pieces so they age beautifully.',
            'format'      => 'PDF',
            'size'        => '2.4 MB',
            'href'        => '#',
        ],
        [
            'title'       => 'Size & Fit Chart',
            'description' => 'Measurements and fit notes across every silhouette in the collection.',
            'format'      => 'PDF',
            'size'        => '1.1 MB',
            'href'        => '#',
        ],
        [
            'title'       => 'Shipping & Returns Policy',
            'description' => 'Delivery timelines, duties and our 30-day no-questions return process.',
            'format'      => 'PDF',
            'size'        => '680 KB',
            'href'        => '#',
        ],
        [
            'title'       => 'Certificate of Authenticity',
            'description' => 'A printable template confirming the provenance of your purchase.',
            'format'      => 'PDF',
            'size'        => '420 KB',
            'href'        => '#',
        ],
    ];
@endphp

{{--
    downloads-01 — "Editorial" Monogram storefront downloads / resources section.
    A font-heading heading over an uppercase wide-tracked eyebrow, followed by a
    thin-bordered vertical list of resource rows. Each row pairs a decorative
    file-type icon with a title, a short description, a file meta line (format, 
    size) and a real `<a download>` link rendered through <x-ui.button>. Static
    Blade — no JS. Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
    Composes <x-ui.button>.
--}}
<x-ui.section
    space="xl" {{ $attributes }}
    data-slot="downloads"
    aria-labelledby="downloads-heading"
>
    <div class="mx-auto max-w-3xl px-6 sm:px-8">
        {{-- ── Section header ── --}}
        <div class="max-w-xl">
            @if ($eyebrow)
                <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">
                    {{ __($eyebrow) }}
                </p>
            @endif

            <h2 id="downloads-heading" class="mt-4 font-heading text-3xl font-normal leading-tight tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>

            @if ($subcopy)
                <p class="mt-4 font-body text-sm leading-relaxed text-muted-foreground">
                    {{ __($subcopy) }}
                </p>
            @endif
        </div>

        {{-- ── Resource list ── --}}
        <ul role="list" class="mt-12 border-t border-border">
            @foreach ($items as $item)
                <li class="flex flex-col gap-4 border-b border-border py-6 sm:flex-row sm:items-center sm:gap-6">
                    {{-- File-type icon (decorative) --}}
                    <div class="flex size-12 shrink-0 items-center justify-center rounded-sm border border-border bg-muted text-muted-foreground" aria-hidden="true">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                            <path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3" />
                            <path d="M3 13h8" />
                            <path d="m8 10-3 3 3 3" />
                        </svg>
                    </div>

                    {{-- Title + description + meta --}}
                    <div class="min-w-0 flex-1">
                        <h3 class="font-heading text-lg font-normal tracking-tight">
                            {{ __($item['title']) }}
                        </h3>

                        @if (! empty($item['description']))
                            <p class="mt-2 font-body text-sm leading-relaxed text-muted-foreground">
                                {{ __($item['description']) }}
                            </p>
                        @endif

                        <p class="mt-2 flex flex-wrap gap-x-4 font-body text-sm uppercase tracking-widest text-muted-foreground">
                            <span>{{ $item['format'] }}</span>
                            <span>{{ $item['size'] }}</span>
                        </p>
                    </div>

                    {{-- Download action --}}
                    <div class="shrink-0 sm:ms-auto">
                        <x-ui.button
                            :href="$item['href']"
                            variant="outline"
                            size="sm"
                            download
                            :aria-label="__('Download :title (:format, :size)', ['title' => __($item['title']), 'format' => $item['format'], 'size' => $item['size']])"
                        >
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M12 3v12" />
                                <path d="m7 11 5 5 5-5" />
                                <path d="M5 20h14" />
                            </svg>
                            {{ __('Download') }}
                        </x-ui.button>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/downloads-list

Installs these dependencies automatically:

button section

Registry contract

Install confidence

php artisan ui:add blocks/downloads-list 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.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/downloads-list.blade.php

Registry dependencies

button section

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.

downloads-list.md

# Brok UI block: Downloads (`downloads-list`)

An editorial storefront downloads section — a font-heading heading over a thin-bordered list of resource rows, each pairing a decorative file-type icon, title, short description, a file meta line (format and size) and a download link.

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/downloads-list
```

## Render it

```blade
<x-blocks.downloads-list />
```

## Props

- `eyebrow` (string, default `Resources`)
- `heading` (string, default `Downloads & Documents`)
- `subcopy` (string, default `Care guides, size charts and shipping details — everything you need, in one place.`)
- `items` (mixed|null, default `null`)

## Use when

- Listing downloadable resources (care guides, size charts, shipping details) as a bordered list of rows with file meta.
- Pairing a decorative file-type icon and description with the format and size shown per row.

## Avoid when

- Use description-list-detail if the attachments belong beside other record details rather than a standalone downloads section.

## Rules

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

Ask about Downloads 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 downloadable resources (care guides, size charts, shipping details) as a bordered list of rows with file meta.
Pairing a decorative file-type icon and description with the format and size shown per row.

Avoid when

Use description-list-detail if the attachments belong beside other record details rather than a standalone downloads section.

Anti-patterns

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

Anatomy: root downloads

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.downloads-list />

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.