A slice to display selected partners and their reviews.

With this slice you can display a selection of our partners in cards, including the company name and logo, their review, their contact person, the grads currently working there, etc. The title has an image from the Humaans Collection on the left side. Below the cards you can display 1 or 2 Buttons.

Limits

• Works best with 4 cards (=4 partners).
• If you want to add buttons below the cards, make sure to add max 2.
• he title has an image from the Humaans Collection on the left side. You can select the image you prefer through the "name" prop, but you cannot disable it. See available options under the "STYLEGUIDE - Illustrations and Icons" folder in this documentation. Make sure to add one of the SMALL options.
• If you make sure to keep the review text of each partner below 150 characters, it will be fully displayed.
• For now, and until we'll be able to retrieve all info about our partners from the DB, info need to be inserted manually. Meaning that all props for each partner will have to be manually added through Prismic.

Do's:

• COLORED TITLE: Color portions of your title with either red, blue, darkblu, green or yellow. To do so, nest the word(s) you want to color with “(red)” if you want the word to be red, “(blue)” for blue and "(darkblu)" for dark blue. For example, if you want to write “Become a developer” and you want the word “developer” to be red, write "Become a (red)developer(red)."

Don'ts:

• COLORED TITLE: Coloring the text only works for one or more adjacent words. For example, “Become an (blue)awesome developer(blue).” will work, but “(blue)Become(blue) an awesome (blue)developer(blue)” won’t. IMPORTANT: DO NOT INCLUDE PUNCTUATION IN THE COLORED PORTION OF THE TEXT, as for some reason the layout will break. So "(red)Academy:(red) Become a developer" won't work, but "(red)Academy(red): Become a developer" will!

Props:

1. Title

• Name: title
• Type: String
• Description: Title of the slice.

2. Subtitle

• Name: subtitle
• Type: String
• Description: The smaller text below the title.

3. Image name (OPTIONAL)

• Name: name
• Type: String
• Description: "name" is the name of the "humaans" image. The "red-shirt" one is the default, but you can change it. See available options under the "STYLEGUIDE - Illustrations and Icons" folder in this documentation. Just insert the name of the image you like in the "name" field.

4. Buttons (OPTIONAL)

• Name: buttonRed, buttonRedLink, buttonRedOutlined, buttonRedOutlinedLink, buttonBlue, buttonBlueLink, buttonBlueOutlined, buttonBlueOutlinedLink
• Type: Button
• Description: You can add 1 or 2 buttons, choosing between these 4 options. Simply add the text and link you want to the buttons you like, and leave the others empty. See the sample components for multiple variations of this slice using different buttons combinations.

Repeatable:

Each partner has a "card", with a bunch of info that belong only to that partner. All info about a partner are inserted in the repeatable area. Each partner can have multiple props. Please notice that they should ALL be filled, none of these is optional.

1. Logo

• Name: logo
• Type: String
• Description: url to the partner's logo.

2. Company Name

• Name: company
• Type: String
• Description: Name of the partner company

3. Review text

• Name: review
• Type: String
• Description: Review from our partners
• Limits: The card will only display the first 150 characters.

4. Contact Person Avatar

• Name: contactAvatar
• Type: String
• Description: url to the photo of the contact person within the partner company

5. Contact Person Name

• Name: contactName
• Type: String
• Description: Name and Surname of the contact person within the partner company

6. Contact Person Job Title

• Name: jobTitle
• Type: String
• Description: Job Title of the contact person within the partner company

7. Students Avatars

• Name: students_0_avatar, students_1_avatar, students_2_avatar, etc.
• Type: String
• Description: url to the avatar image of each of the grads currently working in the partner company. This is a repeatable area within the company repeatable area, which is the reason why the prop has that weird name. 'students_0_avatar' is the first student, 'students_1_avatar' the second one, and so on. Fill them up, in order, starting from students_0. Right now you have max 7 fields, which means 7 students. If a company hired more than 7 students please let the dev team know.
• Limits: Even though you are supposed to insert avatars for each student, only the first 3 will be displayed. If there are more than 3 students, the component will show an icon with a "+1" to "+4" number depending on how many students there are in total. So please insert all students so that the icon will display a reliable number.