Teamblocks:

This section is used for displaying a collection members of a team with their informations.


Available Options:

  • Teamblocks boxed.
  • Teamblocks circled.

Teamblocks boxed:

Output:

/assets/images/about/400x400Crop-Jo_Ann.png

Jo Ann Sanders

Vice President, Product Marketing


/assets/images/about/400x400Crop-Maurice.png

Maurice Wells

Vice President, Global Professional Services


/assets/images/about/OptimizelyHeadshots_Finals_1003-0026_final.png

DC Cashman

Vice President, North America Sales


/assets/images/about/OptimizelyHeadshots_Finals_1003-0021_final.png

Hiliary Robertson

Technical Director, Global Professional Services


/assets/images/about/400x400Crop-Derrick.png

Derrick Alesevich

Marketing director, Global Recruiting


/assets/images/about/Sandi-L.pic2_400x400.jpg

Sandi Lurie

Vice President, Global Recruiting


Code:


<div class="darkout-section">
{% include do-teamblocks.html tag="module" type="type-1" %}
</div>


How to add content:

  • Step1: Navigate to the data file for teamblocks in _data > do-teamblocks.yml
  • Step2: Add content to the data file as shown in the below example.
- name: Jo Ann Sanders  # Use teamblock name here
  image: /assets/images/about/400x400Crop-Jo_Ann.png  # Use teamblock image here
  designation: Vice President, Product Marketing  # Use teamblock designation here
  social-icon:
    - facebook: "#"  # Use teamblock facebook-account here
      twitter: "#"  # Use teamblock twitter-account here
      linkedin: "#"  # Use teamblock linkedin-account here
  tags: modules  # Use teamblock tags here
  • Step3: In the data file tags is a mandatory value. Without using tags teamblocks will not be displayed.

How to add in page:

  • Step1: Add teamblocks to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-teamblocks.html tag="module" type="type-1" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag teamblocks will not be displayed. (Mandatory)
    • type:
      • type-1:
        • Teamblocks boxed style will be used.
    • Class:
      • Use additional class here as include variable.

Teamblocks Circled:

Output:

/assets/images/about/400x400Crop-Jo_Ann.png
Jo Ann Sanders

Vice President, Product Marketing

/assets/images/about/400x400Crop-Maurice.png
Maurice Wells

Vice President, Global Professional Services

/assets/images/about/OptimizelyHeadshots_Finals_1003-0026_final.png
DC Cashman

Vice President, North America Sales

/assets/images/about/OptimizelyHeadshots_Finals_1003-0021_final.png
Hiliary Robertson

Technical Director, Global Professional Services

/assets/images/about/400x400Crop-Derrick.png
Derrick Alesevich

Marketing director, Global Recruiting

/assets/images/about/Sandi-L.pic2_400x400.jpg
Sandi Lurie

Vice President, Global Recruiting

Code:


<div class="darkout-section">
{% include do-teamblocks.html tag="module" type="type-2" %}
</div>


How to add content:

  • Step1: Navigate to the data file for teamblocks in _data > do-teamblocks.yml
  • Step2: Add content to the data file as shown in the below example.
- name: Jo Ann Sanders  # Use teamblock name here
  image: /assets/images/about/400x400Crop-Jo_Ann.png  # Use teamblock image here
  designation: Vice President, Product Marketing  # Use teamblock designation here
  social-icon:
    - facebook: "#"  # Use teamblock facebook-account here
      twitter: "#"  # Use teamblock twitter-account here
      linkedin: "#"  # Use teamblock linkedin-account here
  tags: modules  # Use teamblock tags here
  • Step3: In the data file tags is a mandatory value. Without using tags teamblocks will not be displayed.

How to add in page:

  • Step1: Add teamblocks to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-teamblocks.html tag="module" type="type-2" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag teamblocks will not be displayed. (Mandatory)
    • type:
      • type-2:
        • Teamblocks circled style will be used.
    • Class:
      • Use additional class here as include variable.