Panel Module
Useful for displaying login credentials to users. Makes use of the Tags and Buttons components.
Single Panel
<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>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code-->
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example.server.com</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code-->
</div>
<a role="button" href="#" class="Button Button--text t-1">Call to action</a>
</div>
</div>Dual Panel
<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>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code-->
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example.server.com</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code-->
</div>
<a role="button" href="#" class="Button Button--text t-1">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>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code-->
</div>
<div class="m-bottom-4">
<span class="Panel__label">Server</span>
<div class="Panel__code Quickcopy js-quickcopy">
<div class="Quickcopy__text js-quickcopy-text">
<code>example.server.com</code>
<svg title="Copy to clipboard" class="Icon Icon--size-1 m-x-1 Quickcopy__btn js-quickcopy-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 51"><path d="M20.2 19.6h20.2v3.9H20.2zM20.2 27.5h20.2v3.9H20.2zM20.2 35.3h12.1v3.9H20.2z"/><path d="M44.5 7.9h-4V4c0-2.2-1.8-3.9-4-3.9H8.1C5.9.1 4 1.8 4 4v35.2c0 2.2 1.8 3.9 4 3.9h4V47c0 2.2 1.8 3.9 4 3.9h28.3c2.2 0 4-1.7 4-3.9V11.8c.2-2.1-1.6-3.9-3.8-3.9zm-32.4 3.9v27.4h-4V4h28.3v3.9H16.2c-2.3 0-4.1 1.8-4.1 3.9zM44.5 47H16.2V11.8h28.3V47z"/></svg>
</div><!--Quickcopy__text-->
<div class="Quickcopy__message">Copied!
<svg class="Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"/></svg>
</div><!--Copied-->
</div><!--Panel__code--><span class="Panel__code"><code>example.server.com</code></span>
</div>
<a role="button" href="#" class="Button Button--text t-1">Call to action</a>
</div>
</div>
</div>