---
title: Phone mockup
desc: Phone mockup shows a mockup of an iPhone.
published: true
---

<script>
  import Component from "@components/Component.svelte"
  import ClassTable from "@components/ClassTable.svelte"
  import { prefix } from '$lib/stores';
  import { replace } from '$lib/actions';
</script>

<ClassTable
data="{[
  { type:'component', class: 'mockup-phone', desc: 'Container element' },
]}"
/>

<Component title="iPhone mockup">
<div class="mockup-phone">
  <div class="camera"></div> 
  <div class="display">
    <div class="artboard artboard-demo phone-1">Hi.</div>
  </div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$mockup-phone">
  <div class="$$camera"></div> 
  <div class="$$display">
    <div class="$$artboard $$artboard-demo $$phone-1">Hi.</div>
  </div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$mockup-phone">
  <div className="$$camera"></div> 
  <div className="$$display">
    <div className="$$artboard $$artboard-demo $$phone-1">Hi.</div>
  </div>
</div>`
}</pre>
</Component>

<Component title="With color">
<div class="mockup-phone border-primary">
  <div class="camera"></div> 
  <div class="display">
    <div class="artboard artboard-demo phone-1">Hi.</div>
  </div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$mockup-phone border-primary">
  <div class="$$camera"></div> 
  <div class="$$display">
    <div class="$$artboard $$artboard-demo $$phone-1">Hi.</div>
  </div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$mockup-phone border-primary">
  <div className="$$camera"></div> 
  <div className="$$display">
    <div className="$$artboard $$artboard-demo $$phone-1">Hi.</div>
  </div>
</div>`
}</pre>
</Component>
