Panel Module

Useful for displaying login credentials to users. Makes use of the Tags and Buttons components.


Single Panel

File Upload

Shell SFTP FTP
User example
Server example.server.com
Call to action
<div class="w-50__m m-bottom-7">
<div class="Panel w-100">
<h3 class="Panel__heading">File Upload</h3>
<div class="Panel__tags">
<span class="Tag Tag--blue">Shell</span>
<span class="Tag Tag--blue">SFTP</span>
<span class="Tag Tag--blue">FTP</span>
</div>
<div class="m-bottom-2">
<span class="Panel__label">User</span>
<span class="Panel__code"><code>example</code></span>
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<span class="Panel__code"><code>example.server.com</code></span>
</div>
<a role="button" href="#" class="Button Button--text t-2">Call to action</a>
</div>
</div>

Dual Panel

File Upload

Shell SFTP FTP
User example
Server example.server.com
Call to action

Database (MySQL)

User example
Server example.server.com
Call to action
<div class="w-75__m m-bottom-7">
<div class="Panel--double w-100">
<div class="Panel__section">
<h3 class="Panel__heading">File Upload</h3>
<div class="Panel__tags">
<span class="Tag Tag--blue">Shell</span>
<span class="Tag Tag--blue">SFTP</span>
<span class="Tag Tag--blue">FTP</span>
</div>
<div class="m-bottom-2">
<span class="Panel__label">User</span>
<span class="Panel__code"><code>example</code></span>
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<span class="Panel__code"><code>example.server.com</code></span>
</div>
<a role="button" href="#" class="Button Button--text t-2">Call to action</a>
</div>
<div class="Panel__section">
<h3 class="Panel__heading">Database (MySQL)</h3>
<div class="m-bottom-2">
<span class="Panel__label">User</span>
<span class="Panel__code"><code>example</code></span>
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<span class="Panel__code"><code>example.server.com</code></span>
</div>
<a role="button" href="#" class="Button Button--text t-2">Call to action</a>
</div>
</div>
</div>