card-user-profile

// src/components/elements/card-user-profile/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/card-user-profile
required:
  - first_name
  - last_name
properties:
  avatar:
    description: elements/image
    format: html
    type: string
  card_style:
    type: string
    enum:
      - full
      - minimal
  classes:
    type: array
    items:
      type: string
  email:
    type: string
  first_name:
    type: string
  last_name:
    type: string
  organisation:
    type: string
  phone:
    type: string

// src/components/elements/card-user-profile/mocks.yaml

avatar:
  $ref: elements/image#avatar
  $tpl: elements/image
  alt: ''
  classes:
    - CardUserProfile-avatarImage
first_name: Tiziana
last_name: Lagomarsino
$variants:
  - $name: Full card
    card_style: full
    email: tlagomarsino@finstral.com
    organisation: Admin SICURCASA
    phone: +39 0471 296622
  - $name: Full card hidden avatar
    avatar: ''
    card_style: full
    email: tlagomarsino@finstral.com
    organisation: Admin SICURCASA
    phone: +39 0471 296622
  - $name: Minimal
    organisation: Admin SICURCASA

// src/components/elements/card-user-profile/card-user-profile.twig

<div class="CardUserProfile {{ classes|join(' ') }}">
	<div class="CardUserProfile-header {%- if card_style == 'full' %} CardUserProfile-header--stacked {%- endif -%}">
			{%- if avatar -%}
				<div class="CardUserProfile-avatar">
					{{ avatar }}
				</div>
			{%- endif -%}
			<div>
				<div class="u-typo-HeadlineS">{{ first_name }} {{ last_name }}</div>
				{% if organisation %}
					<div class="u-typo-TextM CardUserProfile-organisation">{{ organisation }}</div>
				{% endif %}
			</div>
	</div>


	{% if email or phone %}
		<ul class="CardUserProfile-contactDetails">
			{% if email %}
				<li class="CardUserProfile-contactDetailsItem">
					{% include "@elements/icon/icon.twig" with {
						name: "email",
					} only %}
					{{ email }}
				</li>
			{% endif %}

			{% if phone %}
				<li class="CardUserProfile-contactDetailsItem">
					{% include "@elements/icon/icon.twig" with {
						name: "phone",
					} only %}
					{{ phone }}
				</li>
			{% endif %}
		</ul>
	{% endif %}
</div>