Frames

Devices' shapes that outline any type of content but most commonly images.

Around component

Phone

9:41 AM
App screen
<!-- Phone frame -->
<div class="cs-frame-phone">
  <div class="cs-frame-phone-status-bar text-light">
    <span class="text-nowrap">9:41 AM</span>
    <span class="text-nowrap text-right">
      <i class="fe-wifi mr-2"></i>
      <i class="fe-battery-charging"></i>
    </span>
  </div>
  <div class="cs-frame-phone-body">
    <img src="path-to-app-screenshot" alt="App screen" />
  </div>
</div>
// Phone frame
.cs-frame-phone
  .cs-frame-phone-status-bar.text-light
    span.text-nowrap 9:41 AM
    span.text-nowrap.text-right
      i.fe-wifi.mr-2
      i.fe-battery-charging
  .cs-frame-phone-body
    +image("path-to-app-screenshot", "App screen")

Browser

https://example.com
Screenshot
<!-- Browser frame -->
<div class="cs-frame-browser">
  <div class="cs-frame-browser-toolbar">
    <div class="text-nowrap mr-3">
      <span class="cs-frame-browser-button bg-danger"></span>
      <span class="cs-frame-browser-button bg-warning"></span>
      <span class="cs-frame-browser-button bg-success"></span>
    </div>
    <span class="font-size-sm">https://example.com</span>
  </div>
  <div class="cs-frame-browser-body">
    <img src="path-to-image" alt="Screenshot"/>
  </div>
</div>
// Browser frame
.cs-frame-browser
  .cs-frame-browser-toolbar
    .text-nowrap.mr-3
      span.cs-frame-browser-button.bg-danger
      span.cs-frame-browser-button.bg-warning
      span.cs-frame-browser-button.bg-success
    span.font-size-sm https://example.com
  .cs-frame-browser-body
    +image("path-to-image", "Screenshot")
Top