Office List

Ready

HTML
View
Context
Assets
Info
Notes


        
        <section class="office-list">
    <div class="office-card">
        <a href="" class="office-card_link">
            <h3>Office Name</h3>
        </a>
        <p>Office Location</p>
    </div>
    <div class="office-card">
        <a href="" class="office-card_link">
            <h3>Office Name</h3>
        </a>
        <p>Office Location</p>
    </div>
    <div class="office-card">
        <a href="" class="office-card_link">
            <h3>Office Name</h3>
        </a>
        <p>Office Location</p>
    </div>
    <div class="office-card">
        <a href="" class="office-card_link">
            <h3>Office Name</h3>
        </a>
        <p>Office Location</p>
    </div>
</section>


        <section class="office-list">
  {% for office in offices %}
    {% include "@business_card--office" with office only %}
  {% endfor %}
</section>


        
            
            {
  "offices": {
    "1": {
      "office_title": "Office Name",
      "office_details": "Office Location"
    },
    "2": {
      "office_title": "Office Name",
      "office_details": "Office Location"
    },
    "3": {
      "office_title": "Office Name",
      "office_details": "Office Location"
    },
    "4": {
      "office_title": "Office Name",
      "office_details": "Office Location"
    }
  }
}

File:

Content:


                                .office-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

URL: /components/raw/office_list/office_list.scss
Filesystem Path: bits/05-sections/office_list/office_list.scss
Size: 76 Bytes

Handle: @office_list
Preview:
- With layout
- Component only
Filesystem Path: bits/05-sections/office_list/office_list.twig
References (1): @business_card--office
Referenced by (1): @landing_page

Display office business card section.