Panels
Panels offer a solution similar to modals, without being as interruptive. They contain a simple content component with a title, body, and footer section. They can also be combined with the flexbox grid to provide a repeating element container.
Example Usage:
Panel Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsam omnis repellat, dolor incidunt, illo recusandae? Ducimus magnam, illo modi eum amet ratione numquam debitis voluptatem! Possimus, aliquid, doloribus. Commodi assumenda facilis nemo delectus eos, doloremque quasi, harum quidem molestias ex quod facere alias temporibus veritatis qui. Eligendi impedit eum assumenda iure dolorum adipisci doloribus.
Code Example:
<div class="panel">
<div class="panel-head">
<p class="panel-title">Panel Example</p>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsam omnis repellat, dolor incidunt, illo recusandae? Ducimus magnam, illo modi eum amet ratione numquam debitis voluptatem! Possimus, aliquid, doloribus. Commodi assumenda facilis nemo delectus eos, doloremque quasi, harum quidem molestias ex quod facere alias temporibus veritatis qui. Eligendi impedit eum assumenda iure dolorum adipisci doloribus.</p>
</div>
<div class="panel-footer">
<button class="button-primary">Action 1</button>
<button class="button-primary-text">Action 2</button>
</div>
</div>