Style Guide

Team Element 

<div class="team-element bg-white">
    <div class="container">
        <div class="title-warp">
            <h2 class="title"> BlueBox Investment Strategy</h2>
            <h1 class="main-title">This is the team</h1>
            <p class="descWrap">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>

        <div class="team-wraper">

            <div class="team-row">
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name</h3>
                            <p class="desc">First Name</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                    <a class="linkedin-icon" href="#" target="_blank">
                                        <img src="/images/linkedin-brands-dark.svg" alt="linkedin" />
                                    </a>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name</h3>
                            <p class="desc">First Name</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name</h3>
                            <p class="desc">First Name</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-col">
                    <div class="team-info-wrap">
                        <div class="team-img">
                            <img src="/images/team.png" alt="team" />
                            <div class="overlay">
                                <div class="text-link text-white">
                                    <a href="#" class="btn-link btn-details">Find out more</a>
                                </div>
                            </div>
                        </div>
                        <div class="team-info">
                            <h3 class="name-title">First Name Surname</h3>
                            <p class="desc">First Name Surname</p>
                        </div>
                        <div class="detailsMobile">
                            <a class="findMore detailMobBtn">Find out more</a>

                            <div class="infoMobile">
                                <div class="descInfo">
                                    <p class="person-description-text"></p>
                                </div>

                                <a class="showLess detailMobBtn">Show less</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a class="show-more-team btn-link">Show all people</a>
        </div>

        <div class="team-details-wraper">
            <div class="arrow-btnWrap">
                <a class="backToTeam btn-link"> <img src="/images/arrow-thin-long-left.svg" alt="arrow" /> Show all people</a>
            </div>

            <div class="teamDetailWrap">
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                    <a class="linkedin-icon" href="#" target="_blank">
                                        <img src="/images/linkedin-brands-dark.svg" alt="linkedin" />
                                    </a>
                                    <div class="rating-box">
                                        <img src="/images/citywire-rating-a-new.png" alt="rating" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row initially-hidden">
                    <div class="col-md-4">
                        <div class="imgWrap">
                            <img src="/images/team.png" alt="team" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="teamInfoWrap">
                            <h3 class="titleName">First Name Surname</h3>
                            <div class="teamInfoContain">

                                <div class="icon_star_wrap">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
<div class="team-element {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="title-warp">
      <h2 class="title"> {{subTitle}}</h2>
      <h1 class="main-title">{{mainTitle}}</h1>
      <p class="descWrap">{{desc}}</p>
    </div>


    <div class="team-wraper">

      <div class="team-row">
        {% for item in teamBlock %}
          <div class="team-col">
            <div class="team-info-wrap">
              <div class="team-img">
                <img src="{{item.imgSrc}}" alt="team" />
                <div class="overlay">
                  <div class="text-link text-white">
                    <a href="#" class="btn-link btn-details">{{findMore}}</a>
                  </div>
                </div>
              </div>
              <div class="team-info">
                <h3 class="name-title">{{item.name}}</h3>
                <p class="desc">{{item.desc}}</p>
              </div>
              <div class="detailsMobile">
                <a class="findMore detailMobBtn">{{findMore}}</a>

                <div class="infoMobile">
                  <div class="descInfo">
                    <p class="person-description-text">{{ item.description }}</p>
                    {% if item.linkedinUrl is not empty %}
                    <a class="linkedin-icon" href="{{item.linkedinUrl}}" target="_blank">
                        <img src="{{item.linkedinImg}}" alt="linkedin"/>
                    </a>
                    {% endif %}
                  </div>

                  <a class="showLess detailMobBtn">{{showLess}}</a>

                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>

      {%if ( teamBlock | length > 9 )%}
        <a class="show-more-team btn-link">{{btn_text}}</a>
      {% endif %}
    </div>

    <div class="team-details-wraper">
      <div class="arrow-btnWrap">
         <a class="backToTeam btn-link"> <img src="{{arrowImg ? arrowImg : '/images/arrow-thin-long-left.svg'}}" alt="arrow"/> {{btn_text}}</a>
      </div>

      <div class="teamDetailWrap">
        {% for item in teamBlock %}
          <div class="row initially-hidden">
              <div class="col-md-4">
                <div class="imgWrap">
                  <img src="{{item.imgSrc}}" alt="team" />
                </div>
              </div>

              <div class="col-md-8">
                <div class="teamInfoWrap">
                  <h3 class="titleName">{{item.name}}</h3>
                  <div class="teamInfoContain">
                    {{ item.description }}
                    <div class="icon_star_wrap">
                      {% if item.linkedinUrl is not empty %}
                        <a class="linkedin-icon" href="{{item.linkedinUrl}}" target="_blank">
                          <img src="{{item.linkedinImg}}" alt="linkedin"/>
                        </a>
                      {% endif %}
                      {% if item.citywire_rating %}
                        <div class="rating-box">
                          <img src="{{ item.citywire_rating }}" alt="rating"/>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
          </div>
        {% endfor %}
      </div>

    </div>

  </div>
</div>
 
{
  "subTitle": "BlueBox Investment Strategy",
  "mainTitle": "This is the team",
  "desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
  "btn_text": "Show all people",
  "btn_link": "#",
  "arrowImg": "/images/arrow-thin-long-left.svg",
  "findMore": "Find out more",
  "showLess": "Show less",
  "bgGrey": false,
  "teamBlock": [
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name",
      "desc": "First Name",
      "btn_text": "Find out more",
      "btn_Link": "#",
      "linkedinImg": "/images/linkedin-brands-dark.svg",
      "linkedinUrl": "#",
      "citywire_rating": "/images/citywire-rating-a-new.png"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name",
      "desc": "First Name",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name",
      "desc": "First Name",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    },
    {
      "item": null,
      "imgSrc": "/images/team.png",
      "name": "First Name Surname",
      "desc": "First Name Surname",
      "btn_text": "Find out more",
      "btn_Link": "#"
    }
  ],
  "teamDetails": [
    {
      "item": null,
      "img": "/images/team.png",
      "titleName": "First Name Surname",
      "linkedinImg": "/images/linkedin-brands-dark.svg",
      "linkedinUrl": "#",
      "ratingImg": "/images/citywire-rating-a-new.png",
      "desc": [
        {
          "item": null,
          "descText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
        },
        {
          "item": null,
          "descText": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
        },
        {
          "item": null,
          "descText": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."
        }
      ]
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function() {
  $(".team-row").each(function(index) {
    $(this)
      .find(".team-col")
      .slice(0, 9)
      .show();
    $(document).on("click touchstart", ".show-more-team", function(e) {
      e.preventDefault();
      $(this)
        .parent()
        .find(".team-col:hidden")
        .slice(0, 9)
        .slideDown();
      if (
        $(this)
          .parent()
          .find(".team-col:hidden").length === 0
      ) {
        $(this).css("display", "none");
      }
    });
  });

  $(".btn-details").on("click", function() {
    $(".team-wraper").css("display", "none");
    const index = $(this).parents('.team-col').index();
    $(this).parents('.team-element').find('.teamDetailWrap > div').hide().eq(index).css('display', 'flex');
    $(".team-details-wraper").show();
    $(".team-details-wraper").css("display", "block");
    $([document.documentElement, document.body]).animate({
      scrollTop: $(this).parents('.team-element').find(".team-details-wraper").offset().top - $('.top-header').height()
    }, 1);
    return false;
  });

  $(".backToTeam").on("click", function() {
    $(".team-details-wraper").css("display", "none");
    $(".team-wraper").show();
    $(".team-wraper").css("display", "block");

    return false;
  });

  $(".findMore").on("click", function() {
    $(this).css("display", "none");
    $(this)
      .parent()
      .find(".infoMobile")
      .css("display", "block");
    return false;
  });

  $(".showLess").on("click", function() {
    $(this)
      .parent()
      .css("display", "none");
    $(this)
      .parents(".detailsMobile")
      .find(".findMore")
      .css("display", "block");
    return false;
  });


});
  • URL: /components/raw/team_element/team_element.js
  • Filesystem Path: components/03-components/team_element/team_element.js
  • Size: 1.7 KB
  • Content: 
    .team-element {
  padding: 120px 0;
  @include media-breakpoint-down(lg) {
    padding: 80px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .initially-hidden {
    display: none;
  }

  .title-warp {
    margin-bottom: 90px;
    padding-left: 48px;
    @include media-breakpoint-down(lg) {
      margin-bottom: 40px;
      padding-left: 0;
    }
    .title {
      font-size: 17px;
      font-family: "OpenSans_light";
      line-height: 23px;
      color: #120f29;
    }
    .main-title {
      font-size: 60px;
      font-family: "PlayfairDisplay-Bold";
      color: #120f29;
      margin-bottom: 0;
      @include media-breakpoint-down(lg) {
        font-size: 40px;
      }
    }
    .descWrap {
      max-width: 665px;
      padding-top: 25px;
    }
  }

  .team-col {
    display: none;
    margin-bottom: 50px;
    .team-info-wrap {
      text-align: center;
      @include media-breakpoint-down(md) {
        text-align: left;
      }
      .team-img {
        position: relative;
        margin: auto;
        max-width: 210px;
        margin-bottom: 20px;
        border: 1px solid hsla(0, 0%, 59.2%, 0.3);
        @include media-breakpoint-up(md) {
          &:hover {
            .overlay {
              display: block;
            }
          }
        }
        @include media-breakpoint-down(md) {
          margin: 0;
          margin-bottom: 10px;
        }
        img {
          max-width: 100%;
          height: 280px;
          width: 100%;
          object-fit: cover;
        }
        .overlay {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          height: 280px;
          width: 100%;
          display: none;
          // opacity: 0.8;
          transition: all 0.4s ease-in-out;
          background: linear-gradient(#29235c 0%, rgba(0, 0, 0, 0.7) 80%);
          // @include media-breakpoint-down(md) {
          //   display: none;
          // }
          .text-link {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            .btn-link {
              white-space: nowrap;
              opacity: 1;
            }
          }
        }
      }
    }
    .team-info {
      .name-title {
        color: #120f29;
        font-size: 29px;
        font-family: "PlayfairDisplay-Bold";
        line-height: 38px;
        @include media-breakpoint-down(lg) {
          font-size: 24px;
          margin-bottom: 0;
          line-height: 27px;
        }
      }
      .desc {
        @include media-breakpoint-down(lg) {
          margin-bottom: 0;
        }
      }
    }
  }

  .show-more-team {
    padding-top: 20px;
    text-decoration: none;
  }

  .team-details-wraper {
    display: none;
    .arrow-btnWrap {
      padding-bottom: 30px;
    }
    .teamDetailWrap {
      .imgWrap {
        @include media-breakpoint-down(md) {
          text-align: center;
        }
        img {
          max-width: 100%;
          height: 280px;
          border: 1px solid rgba(151, 151, 151, 0.3);
        }
      }
      .teamInfoWrap {
        @include media-breakpoint-down(md) {
          margin-top: 20px;
        }
        .titleName {
          color: #120f29;
          font-size: 29px;
          font-family: "PlayfairDisplay-Bold";
          line-height: 38px;
          margin-bottom: 15px;
          margin-top: 10px;
          @include media-breakpoint-down(md) {
            font-size: 24px;
          }
        }
        .teamInfoContain {
          p {
            line-height: 29px;
            margin-bottom: 25px;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

.detailsMobile {
  padding-top: 20px;
  @include media-breakpoint-up(md) {
    display: none;
  }
  @include media-breakpoint-down(md) {
    padding-top: 7px;
  }
  .infoMobile {
    display: none;
    .descInfo {
      padding-bottom: 20px;
    }
  }
  .showLess {
    margin-top: 20px;
  }
  .detailMobBtn {
    cursor: pointer;
    color: $secondary;
    font-size: 18px;
    font-family: "PlayfairDisplay-SemiBold";
    line-height: 24px;
    padding: 0;
    text-decoration: none;
  }
}

.team-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  @include media-breakpoint-down(md) {
    display: block;
  }
  .team-col {
    max-width: 33.3%;
    flex: 0 0 33.3%;
    @include media-breakpoint-down(md) {
      max-width: 100%;
      flex: auto;
    }
  }
}

.linkedin-icon {
  transition: all 0.5s ease-in-out;
  &:hover {
    img {
      transition: all 0.5s ease-in-out;
      transform: scale(1.1);
    }
  }
}


.icon_star_wrap{
  display: flex;
  align-items: center;
}

.rating-box{
  margin-left: 15px;

  img {
    height: 23px;
  }
}

// .rating-box {
//   display: inline-block;
//   margin-left: 15px;
//   .rating-container {
//     direction: rtl !important;
//     label {
//       display: inline-block;
//       color: #80d6f3;
//       cursor: pointer;
//       font-size: 35px;
//       transition: color 0.2s;
//     }
//     input {
//       display: none;
//     }
//     label:hover, label:hover ~ label, input:checked ~ label  {
//       color: #80d6f3;
//     }
//   }
// }
  • URL: /components/raw/team_element/team_element.scss
  • Filesystem Path: components/03-components/team_element/team_element.scss
  • Size: 5.4 KB

There are no notes for this item.