Sidebars

Content areas paired with a left and/or right sidebar.

Meet The Team

Jane Doe

Co-Founder/CEO

John Smith

Product Development

Bill Franklin

Web Development

Content area + Left Sidebar

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, laudantium numquam odit soluta iusto maiores voluptatibus voluptatum rerum laborum assumenda debitis ducimus quibusdam recusandae similique quia iste nam perferendis reprehenderit?

Code Example

<z-container-fluid>
  <z-container>
    <z-row class="tablet-reverse">
      <z-col class="flex align-items-stretch theme-light">
        <z-container>
          <z-row>
            <z-col class="card gap-0">
              <h2 class="h5 pb-3">Meet The Team</h2>
              <div class="image-group">
              <img src="your-image.jpg" alt="" class="w-40 img-left">
              <p class="headline semibold">Jane Doe</p>
                <small>Co-Founder/CEO</small>
              </div>
              <hr>

              <div class="image-group">
              <img src="your-image.jpg" alt="" class="w-40 img-left">
              <p class="headline semibold">John Smith</p>
                <small>Product Development</small>
              </div>
              <hr>

              <div class="image-group">
                <img src="your-image.jpg" alt="" class="w-40 img-left">
                <p class="headline semibold">Bill Franklin</p>
                <small>Web Development</small>
              </div>
            </z-col>
          </z-row>
        </z-container>
      </z-col>
      <z-col class="card feature-xl">
        <h2>Content area + Left Sidebar</h2>
        <p>Lorem ipsum dolor... </p>
      </z-col>
    </z-row>
  </z-container>
</z-container-fluid>

Content Area + Right Sidebar

Code Example

<z-container-fluid>
  <z-container>
    <z-row>
      <z-col class="card feature-xl">
        <h2>Content Area + Right Sidebar</h2>
        <p>Lorem ipsum ... </p>
      </z-col>
      <z-col class="flex align-items-stretch">
        <z-container>
          <z-row>
            <z-col class="card p-0">
              <nav class="nav-menu theme-light">
                <ul class="flex-grow-1">
                  <li class="active"><i class="icon zenicon-person"></i> Account</li>
                  <li><i class="icon zenicon-shield"></i> Billing</li>
                  <li><i class="icon zenicon-https"></i> Security</li>
                  <li><i class="icon zenicon-notifications-off"></i> Notifications</li>
                  <li><i class="icon zenicon-ind-in-page"></i> Preferences</li>
                  <li><i class="icon zenicon-settings"></i> Settings</li>
                </ul>
              </nav>
            </z-col>
          </z-row>
        </z-container>
      </z-col>
    </z-row>
  </z-container>
</z-container-fluid>

Meet The Team

Jane Doe

Co-Founder/CEO

John Smith

Product Development

Bill Franklin

Web Development

Content + Left/Right Sidebars

Code Example

<z-container-fluid>
  <z-container>
    <z-row>
      <z-col class="flex align-items-stretch theme-light tablet-order-2">
        <z-container>
          <z-row>
            <z-col class="card gap-0">
              <h2 class="h5 pb-3">Meet The Team</h2>
              <div class="image-group">
                <img src="your-image.jpg" alt="" class="w-40 img-left">
                <p class="headline semibold">Jane Doe</p>
                <small>Co-Founder/CEO</small>
              </div>
              <hr>
              <div class="image-group">
                <img src="your-image.jpg" alt="" class="w-40 img-left">
                <p class="headline semibold">John Smith</p>
                <small>Product Development</small>
              </div>
              <hr>
              <div class="image-group">
                <img src="your-image.jpg" alt="" class="w-40 img-left">
                <p class="headline semibold">Bill Franklin</p>
                <small>Web Development</small>
              </div>
            </z-col>
          </z-row>
        </z-container>
      </z-col>
      <z-col class="card feature-xl tablet-order-0">
        <h2>Content + Left/Right Sidebars</h2>
        <p>Lorem ipsum ... </p>
      </z-col>
      <z-col class="flex align-items-stretch p-0 tablet-order-1 ">
        <z-container>
          <z-row>
            <z-col class="card p-0">
              <nav class="nav-menu theme-light">
                <ul class=" flex-grow-1">
                  <li><i class="icon zenicon-person pr-2"></i> Account</li>
                  <li><i class="icon zenicon-shield"></i> Billing</li>
                  <li><i class="icon zenicon-https"></i> Security</li>
                  <li><i class="icon zenicon-notifications-off"></i> Notifications</li>
                  <li><i class="icon zenicon-ind-in-page"></i> Preferences</li>
                  <li><i class="icon zenicon-settings"></i> Settings</li>
                </ul>
              </nav>
            </z-col>
          </z-row>
        </z-container>
      </z-col>
    </z-row>
  </z-container>
</z-container-fluid>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.