Panel

Default

Basic panel layout. Also use Panel for table layout. See table for more info.

Panel Header

Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet mauris vitae enim sollicitudin mattis. Integer sapien ex, congue et dictum vitae, porta vitae felis. Suspendisse tortor odio, elementum id gravida non, malesuada vel nisl.

Ut nec ex magna. Sed at ipsum eu nulla rhoncus faucibus ut vel erat. Integer vitae porta erat, eu convallis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed efficitur at eros sed lobortis. Phasellus metus dolor, suscipit id consectetur vel, auctor in lacus. Mauris consequat ut enim id tempor. Morbi nec egestas elit.

leo : Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="Panel">
  <div class="Panel-header">
    <h3 class="Panel-title">
      Panel Header
    </h3>
    <button class="Button">
      <svg viewBox="0 0 960 960" role="presentation" class="Icon">
        <path d="M58.3 950c-12.2 0-22.8-4.5-31.8-13.5-11.6-11.6-15.7-25-12.5-40.4L109.3 458c.6-7.7 4.8-15.4 12.5-23.1L525.2 31.5c8.3-9 18.9-13.5 31.8-13.5s23.4 4.5 31.8 13.5l344.7 343.7c8.3 9 12.5 19.7 12.5 32.3 0 12.5-4.2 23.3-12.5 32.3L529.1 843.1c-6.4 6.4-14.1 10.6-23.1 12.5C209.4 918.5 60.2 950 58.3 950zm424.6-247.4l324.5-324.5-62.6-63.5L420.3 639c-12.8 12.8-28.6 19.3-47.2 19.3s-34.3-6.4-47.2-19.3c-12.8-12.8-19.3-28.4-19.3-46.7s6.4-33.9 19.3-46.7l324.5-325.4-62.6-62.6-324.5 324.5c-19.9 19.9-43.3 25-70.3 15.4l-33.7 177.2 130 130.9 178.1-34.7c-9.6-25.7-4.4-48.4 15.5-68.3z" />
      </svg>
      Edit
    </button>
  </div>
  <div class="Panel-body">
    <div class="Panel-row">
      <h4>Dolor Sit Amet</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet mauris vitae enim sollicitudin mattis. Integer sapien ex, congue et dictum vitae, porta vitae felis. Suspendisse tortor odio, elementum id gravida non, malesuada vel nisl.</p>
      <p>Ut nec ex magna. Sed at ipsum eu nulla rhoncus faucibus ut vel erat. Integer vitae porta erat, eu convallis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed efficitur at eros sed lobortis. Phasellus metus dolor, suscipit id consectetur vel, auctor in lacus. Mauris consequat ut enim id tempor. Morbi nec egestas elit.</p>
    </div>
    <div class="Panel-row">
      <p><strong>leo :</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="Panel-footer">
    <button class="Button Button--negative">Sit</button>
    <button class="Button Button--primary">Amet</button>
  </div>
</div>