OG Image

Open source

Open Graph social-card templates (1200×630) — minimal, editorial, product, profile, stat, quote and more — token-themed and ready to screenshot in an OG route.

Add to page builder

12 of 16

resources/views/blocks/og-image-terminal.blade.php Blade

@props([
    'brand' => 'ogimagecn',
    'title' => 'Ship faster',
    'caption' => '$ npx create-og',
    'logo' => null,
])

{{--
    Open Graph card — "Terminal". A minimal, technical 1200×630 card laid out as
    a justify-between column: a brand mark at the top and a huge uppercase
    headline with an optional code-pill caption at the bottom. Adapted from
    ogimagecn.com to our system: the green accent maps to the `success` token,
    the raw-colour chrome becomes `bg-background`/`border-border`, and the card
    follows the active theme. Render it inside a 1200×630 viewport in your OG
    image route (e.g. a Browsershot screenshot) for pixel-accurate social cards.
--}}
<figure
    data-slot="og-image"
    data-variant="terminal"
    {{ $attributes->merge(['class' => 'relative isolate flex aspect-[1200/630] w-full flex-col justify-between overflow-hidden rounded-lg border border-border bg-background p-8 text-foreground sm:p-12 lg:p-20']) }}
>
    <div class="flex items-center gap-4">
        @if ($logo)
            <img src="{{ $logo }}" alt="" class="size-8 rounded-md object-contain sm:size-10 lg:size-11" />
        @else
            <span class="size-8 rounded-md bg-success sm:size-10 lg:size-11" aria-hidden="true"></span>
        @endif
        <span class="text-lg font-bold sm:text-2xl lg:text-3xl">{{ __($brand) }}</span>
    </div>

    <figcaption class="flex flex-col items-start">
        <h2 class="text-balance text-5xl font-bold uppercase leading-none tracking-tight sm:text-7xl lg:text-8xl">{{ __($title) }}</h2>
        @if ($caption)
            <x-ui.badge variant="outline" class="mt-6 sm:mt-8">{{ __($caption) }}</x-ui.badge>
        @endif
    </figcaption>
</figure>

Installation

terminal

php artisan ui:add blocks/og-image-terminal

Installs these dependencies automatically:

badge

Registry contract

Install confidence

php artisan ui:add blocks/og-image-terminal 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.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/og-image-terminal.blade.php

Registry dependencies

badge

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.

og-image-terminal.md

# Brok UI block: OG Terminal (`og-image-terminal`)

A minimal technical Open Graph card with a top brand mark and a huge uppercase headline above an optional code-pill caption.

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/og-image-terminal
```

## Render it

```blade
<x-blocks.og-image-terminal />
```

## Props

- `brand` (string, default `ogimagecn`) — Brand name shown beside the logo mark at the top.
- `title` (string, default `Ship faster`) — Huge uppercase headline.
- `caption` (string, default `$ npx create-og`) — Code-style caption badge under the headline; falsy hides it.
- `logo` (mixed|null, default `null`) — Optional logo image URL; falls back to a solid token square when null.

## Use when

- Use for a minimal, technical social card that pairs a small top brand mark with a huge uppercase headline and an optional code-pill caption.
- Suited to developer tools, CLIs or technical documentation pages that want a terse, code-flavoured look.

## Avoid when

- Avoid when descriptive body copy or supporting metadata is needed; use og-image-simple (simple) or og-image-grid (grid) instead.

## Rules

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

Ask about OG Terminal 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

Use for a minimal, technical social card that pairs a small top brand mark with a huge uppercase headline and an optional code-pill caption.
Suited to developer tools, CLIs or technical documentation pages that want a terse, code-flavoured look.

Avoid when

Avoid when descriptive body copy or supporting metadata is needed; use og-image-simple (simple) or og-image-grid (grid) instead.

Anti-patterns

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

Anatomy: figure root brand mark headline caption badge

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.og-image-terminal />

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.