Team demo

Set up controller

The first example showed how to set up the controller and include a header with a description.

Important: Each team controller must contain at least one member; otherwise, the code will not compile.

<div data-controller="easy-team">
        <div data-easy="header">Our skilled experts</div>
        <div data-easy="subHeader">Our team is a tiny crew of highly motivated chaos-tamers, turning wild ideas, tight deadlines, and too much coffee into things that actually won't work.</div>
</div>

Members

For now, we will add one member with the minimal required information.

<div data-controller="easy-team">
        <div data-easy="header">Our skilled experts</div>
        <div data-easy="subHeader">Our team is a tiny crew of highly motivated chaos-tamers, turning wild ideas, tight deadlines, and too much coffee into things that actually won't work.</div>
        <div data-easy="member">
            <div data-easy="name">Cache Crusader</div>
            <div data-easy="position">Speed Sorcerer</div>
        </div>
</div>

To complete the member, add a short description and an image.

Important: Not all templates support all optional elements. Refer to the examples below for details.

<div data-controller="easy-team">
        <div data-easy="header">Our skilled experts</div>
        <div data-easy="subHeader">Our team is a tiny crew of highly motivated chaos-tamers, turning wild ideas, tight deadlines, and too much coffee into things that actually won't work.</div>
        <div data-easy="member">
            <div data-easy="name">Cache Crusader</div>
            <div data-easy="position">Speed Sorcerer</div>
            <div data-easy="desc">Banishes slow loads to the digital abyss.</div>
            <div data-easy="img" src="pathToImg" alt="Image of Cache Crusader"></div>
        </div>
</div>

Let's complete the team by adding a few more members.

<div data-controller="easy-team">
        <div data-easy="header">Our skilled experts</div>
        <div data-easy="subHeader">Our team is a tiny crew of highly motivated chaos-tamers, turning wild ideas, tight deadlines, and too much coffee into things that actually won't work.</div>
        <div data-easy="member">
            <div data-easy="name">Cache Crusader</div>
            <div data-easy="position">Speed Sorcerer</div>
            <div data-easy="desc">Banishes slow loads to the digital abyss.</div>
            <div data-easy="img" src="pathToImg" alt="Image of Cache Crusader"></div>
        </div>
        <div data-easy="member">
            <div data-easy="name">Pixel Wizard</div>
            <div data-easy="position">Layout Lord</div>
            <div data-easy="desc">Makes designs dance with just a flick of CSS.</div>
            <div data-easy="img" src="pathToImg" alt="Image of Pixel Wizard"></div>
        </div>
        <div data-easy="member">
            <div data-easy="name">Meme Librarian</div>
            <div data-easy="position">Vibe Keeper</div>
            <div data-easy="desc">Curates laughs and fixes the fun factory.</div>
            <div data-easy="img" src="pathToImg" alt="Image of Meme Librarian"></div>
        </div>
</div>

Contacts

You can add contact information directly to each member.

Note: "phone" and "mail" are predefined keywords. Refer to the team documentation for more details.

<div data-easy="member">
    <div data-easy="name">Cache Crusader</div>
    <div data-easy="position">Speed Sorcerer</div>
    <div data-easy="desc">Banishes slow loads to the digital abyss.</div>
    <div data-easy="img" src="pathToImg" alt="Image of Cache Crusader"></div>
    <div data-easy="contacts">
        <div data-easy="phone">123456789</div>
        <div data-easy="mail">cache@chaos-tamers.fantasy</div>
    </div>
</div>

Socials

In addition to contact information, you can also add social links.

<div data-easy="member">
    <div data-easy="name">Cache Crusader</div>
    <div data-easy="position">Speed Sorcerer</div>
    <div data-easy="desc">Banishes slow loads to the digital abyss.</div>
    <div data-easy="img" src="pathToImg" alt="Image of Cache Crusader"></div>
    <div data-easy="socials">
        <div data-easy="facebook">www.facebook.com</div>
        <div data-easy="twitter">www.x.com</div>
    </div>
</div>

Styling

There are several ways to customize the team section.

Note: The text color cannot be changed for all templates.

Important: For some templates, it may be necessary to set a custom text color. Easy automatically tries to adjust the text color to achieve the best possible contrast with the selected skill color, but this may not always produce ideal results.

Text color

Note: Some templates may use fixed font colors.

<div data-controller="easy-team" data-easy-team-text-color-value="gray" >
    ...
</div>

Color schemes

You can define colors for both the light and dark schemes.

Note: In some cases, you may need to set both to achieve proper contrast.

<div data-controller="easy-team" data-easy-team-dark-color-value="gray" >
    ...
</div>

Templates

Below are examples of all available templates in the light scheme with animations enabled.

Template One

<div data-controller="easy-team" data-easy-team-template-value="one-dodgerblue-dark" >
    ...
</div>

Template Two

<div data-controller="easy-team" data-easy-team-template-value="two-dodgerblue-dark" >
    ...
</div>

Template Three

<div data-controller="easy-team" data-easy-team-template-value="three-dodgerblue-dark" >
    ...
</div>

Template Four

<div data-controller="easy-team" data-easy-team-template-value="four-dodgerblue-dark" >
    ...
</div>

Template Five

<div data-controller="easy-team" data-easy-team-template-value="five-dodgerblue-dark" >
    ...
</div>

Template Six

<div data-controller="easy-team" data-easy-team-template-value="six-dodgerblue-dark" >
    ...
</div>

Template Seven

<div data-controller="easy-team" data-easy-team-template-value="seven-dodgerblue-dark" >
    ...
</div>

Template Eight

<div data-controller="easy-team" data-easy-team-template-value="eight-dodgerblue-dark" >
    ...
</div>