Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add mockup

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::mockup> frames a screenshot or a live demo.

Basic Usage

Your screenshot or a live component goes here.
The orders screen
<x-aura::mockup url="app.aura-ui.com/orders" title="The orders screen">
    <div class="p-6 text-sm text-aura-surface-600">Your screenshot or a live component goes here.</div>
</x-aura::mockup>

Phone

A narrow screen.
<x-aura::mockup variant="phone">
    <div class="p-6 text-center text-sm text-aura-surface-600">A narrow screen.</div>
</x-aura::mockup>

Props

Prop Type Default Description
variant string 'browser' browser or phone.
url string|null null Shown in the fake address bar. Browser only.
title string|null null Rendered as a real <figcaption>.
shadow bool true Drop shadow.

Accessibility

  • The frame is scenery and is aria-hidden: the traffic-light dots, the notch and the address bar. Without that, a screen reader reads three coloured circles before reaching the thing being shown.
  • The component is a <figure>, and title is its <figcaption> — a caption for everyone, not a tooltip.
  • If the content is a static image, give that image real alt text. The frame cannot describe what is inside it.