---
updatedAt: 2025-05-08T20:42:41.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Complex Layouts

<HTMLBlock>{`
<img src="https://appliancetheme.vtexassets.com/assets/app/src/complex_layout_course_icon___dcea05389ebe234d38cc35ec721fa346.svg" width=120/>
`}</HTMLBlock>

## Building complex *layouts*

This course will show you how to use the different blocks of the Store Framework in order to develop more complex layouts. Find out how to use composition blocks, along with the blocks already learned in the Basic Blocks course to obtain diverse and complex layouts.

<HTMLBlock>{`
  <style>
    section#hub-content header h1, section#hub-content header h2 {
      color: #f71963
    }

    p {
      line-height: 1.5rem;
    }

    .container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .row-item {
      display: flex;
      align-items: center;
      border-top: 1px solid #e1e4e8 !important;
    }

    .last {
      border-bottom: 1px solid #e1e4e8 !important;
    }
    .counter {
      padding: 0 2rem 0 2rem;
      color: #717786;
    }

    .heading-text {
      color: #f71963;
      font-weight: bold;
      padding: 1rem 0 0.5rem 0;
    }

    .step {
      color: #717786;
      font-weight: bold;
    }

    .course-link {
      text-decoration: none !important;
    }
  </style>
  <div class="container">
    
  <a class="course-link" href="course-layout-blocks-step01introducing-layout-lang-en">
    <div class="row-item">
        <h2 class="counter">1</h1>
        <span class="step">Introducing Layout Blocks</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step02flexlayout-lang-en">
    <div class="row-item">
        <h2 class="counter">2</h1>
        <span class="step">Flex layout</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step03slider-lang-en">
    <div class="row-item">
        <h2 class="counter">3</h1>
        <span class="step">Carousel blocks</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step04responsive-lang-en">
    <div class="row-item">
        <h2 class="counter">4</h1>
        <span class="step">Making Responsive Content</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step05tab-layout-lang-en">
    <div class="row-item">
        <h2 class="counter">5</h1>
        <span class="step">Tab Layout</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step06modal-layout-lang-en">
    <div class="row-item">
        <h2 class="counter">6</h1>
        <span class="step">Modal Layout</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step07quick-view-lang-en">
    <div class="row-item">
        <h2 class="counter">7</h1>
        <span class="step">Quick View</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step08stack-layout-lang-en">
    <div class="row-item">
        <h2 class="counter">8</h1>
        <span class="step">Stack Layout</span>  
    </div>
  </a>
  <a class="course-link" href="course-layout-blocks-step09conditional-layout-lang-en">
    <div class="row-item">
        <h2 class="counter">9</h1>
        <span class="step">Conditional Layout</span>  
    </div>
  </a>
  </div>
`}</HTMLBlock>