Demonstrate Team Members Page.
View this pattern on the live demo site
Team index page wrapping the team-members section.
{% comment %}
Display the listing page for all team members
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- include "/sections/_generic_banner.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_team_members.liquid" is_main:true section_class:'py-5' -%}
{%- include "/sections/_simple_cta.liquid" -%}
{%- include "/_footer.liquid" -%}Grid of team member cards from the datastore.
{% comment %}
Outputs a section that includes the selected team members, and optionally a "Join our team" card
Inputs:
section_class - an optional classname to apply to the section
section_id - an optional id to apply to the section
is_main - true if this is the main section of the page (for semantic markup)
img_preset_team_bg - The image preset to use for the section background image
Custom Fields:
team_title
team_text
team_members
team_bg_image
team_show_join
team_join_title
team_join_text
team_join_url
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- var section_tag = 'section' %}{% if is_main %}{% set section_tag = 'main' %}{% endif -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{% image_url var bgImg = entity.team_bg_image preset:'webp' preset:img_preset_team_bg %}
<{{ section_tag }} class="{% if section_class %}{{ section_class }} {% endif %}position-relative"{% if section_id %} id="{{ section_id }}"{% endif %}{% if bgImg is_valid %} style="background: url({{bgImg}}) no-repeat center; background-size:cover;"{% endif %}>
{%- if bgImg is_valid -%}
<div class="position-absolute top-0 start-0 w-100 h-100 text-bg-light" style="opacity: 0.92;" aria-hidden="true"></div>
{%- endif -%}
<div class="container py-lg-4 position-relative">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row align-items-center g-4 mb-5 mb-lg-6">
<div class="col-md-4">
{%- if entity.team_title.is_valid -%}
{%- include '/common/_title.liquid' title:entity.team_title postincrement_headinglevel:true -%}
{%- endif -%}
</div>
<div class="col-md-8">{{ entity.team_text }}</div>
</div>
<div class="row g-4 justify-content-center align-items-stretch">
{%- for member in entity.team_members -%}
{%- include '/partials/_team_member_card.liquid' -%}
{%- endfor -%}
{%- if entity.team_show_join.on -%}
{%- include '/partials/_join_team_card.liquid' join_team_title:entity.team_join_title join_team_text:entity.team_join_text join_team_url:entity.team_join_url.value -%}
{%- endif -%}
</div>
</div>
</div>
</div>
</{{ section_tag }}>
{%- set section_rendered = true -%}
Custom fields owned by the team listing section.
[
{
"Type": "group",
"Fields": [
{
"Type": "text",
"DefaultValue": "Our Team",
"FieldID": "team_title",
"Label": "Title"
},
{
"Type": "html",
"FieldID": "team_text",
"Label": "Summary Text"
},
{
"Type": "datastoreitemlist",
"IsRequired": true,
"FieldID": "team_members",
"Label": "Team Members",
"DatastoreGUID": "Team Members"
},
{
"Type": "image",
"FieldID": "team_bg_image",
"Label": "Background Image"
},
{
"Type": "toggle",
"OnLabel": "Show",
"OnValue": "On",
"OnColor": "green",
"OffLabel": "Hide",
"OffValue": "Off",
"OffColor": "red",
"DefaultValue": true,
"FieldID": "team_show_join",
"Label": "Show Join Team CTA"
},
{
"Type": "text",
"DefaultValue": "Want To Be Part Of The Team?",
"IsRequired": true,
"FieldID": "team_join_title",
"Label": "Join Team Title"
},
{
"Type": "text",
"DefaultValue": "Inquire Today",
"IsRequired": true,
"FieldID": "team_join_text",
"Label": "Join Team Text"
},
{
"Type": "url",
"IsRequired": true,
"FieldID": "team_join_url",
"Label": "Join Team URL"
}
],
"Label": "Team Section"
}
]
One team member card in the index grid.
{% comment %}
Outputs a single team member as a card
Inputs:
member - The team member (datastore item) to output
img_preset_team_member_thumb - The image preset to use for the team member thumbnail
{% endcomment -%}
{%- var detail_url = member.button_link.value | default: member.full_url -%}
{%- var detail_label = member.button_text -%}
{%- unless detail_label is_valid -%}
{%- set detail_label = 'Meet ' | append: member.title.value -%}
{%- endunless -%}
<div class="col-md-6 col-xl-4">
<article class="card h-100 border-0 shadow-sm overflow-hidden{% if detail_url is_valid %} position-relative{% endif %}">
<div class="position-relative">
{%- if member.image.is_valid -%}
{%- img member.image link:false preset:img_preset_team_member_thumb class:"card-img-top w-100" style:"height: 220px; object-fit: cover;" -%}
{%- else -%}
<div class="card-img-top bg-secondary-subtle" style="height: 220px;" aria-hidden="true"></div>
{%- endif -%}
{%- if member.role.is_valid -%}
<span class="position-absolute bottom-0 start-0 m-3 badge text-bg-primary text-uppercase fw-semibold">{{ member.role }}</span>
{%- endif -%}
</div>
<div class="card-body d-flex flex-column p-4">
<p class="h5 text-primary mb-1">{{ member.title }}</p>
{%- if member.tenure.is_valid -%}
<p class="small text-muted mb-3"><i class="bi bi-clock-history me-1" aria-hidden="true"></i>{{ member.tenure }}</p>
{%- endif -%}
{%- if member.summary.is_valid -%}
<p class="small mb-4 flex-grow-1">{{ member.summary }}</p>
{%- endif -%}
{%- if detail_url is_valid -%}
<div class="mt-auto">
<a href="{{ detail_url }}" class="btn btn-outline-primary btn-sm fw-semibold text-uppercase stretched-link">{{ detail_label }}</a>
</div>
{%- endif -%}
</div>
</article>
</div>Optional “join the team” card appended to the grid.
{% comment %}
Displays a "card" inviting the user to become part of the team
Inputs:
join_team_title - the card title
join_team_text - the button text
join_team_url - the button link
{% endcomment -%}
<div class="col-md-6 col-xl-4">
<article class="card h-100 border-0 shadow-sm text-bg-secondary overflow-hidden position-relative">
<div class="card-body d-flex flex-column justify-content-center text-center p-4 p-lg-5">
<p class="h5 fw-bold mb-4 text-uppercase">{{ join_team_title }}</p>
<p class="small text-muted mb-4">We're always looking for friendly faces at the counter and smokehouse.</p>
<a href="{{ join_team_url }}" class="btn btn-light fw-semibold px-4 py-2 text-uppercase stretched-link">{{ join_team_text }}</a>
</div>
</article>
</div>