<!-- ### Begin: Element player-card ### -->
<div id="c715" class="frame frame-default frame-type-player-card frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="row">
<div class="col-md-6 col-lg-4">
<a href="" class="card">
<div class="card-image player-image">
<div class="player-number">
<span class="sr-only">Spielernummer:</span>22
</div>
<img src="../../common/img/dummy-images/HSG_Wetzlar_Holst_Maximilian_22_Ganzkoerper_900x1425.png" title="Maximilian Holst" />
</div>
<div class="card-body">
<h3 class="card-title player-name">
Maximilian
Holst
</h3>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="" class="card">
<div class="card-image player-image">
<div class="player-number">
<span class="sr-only">Spielernummer:</span>7
</div>
<img src="../../common/img/dummy-images/HSG_Wetzlar_Bjoernsen_Kristian_7_Ganzkoerper_900x1425.png" title="Kristian Bjornsen" />
</div>
<div class="card-body">
<h3 class="card-title player-name">
Kristian
Bjornsen
</h3>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="" class="card">
<div class="card-image player-image">
<div class="player-number">
<span class="sr-only">Spielernummer:</span>25
</div>
<img src="../../common/img/dummy-images/HSG_Wetzlar_Forsell_Schefvert_Olle-25_Ganzkoerper_900x1425.png" title="Olle Forsell Schefvert" />
</div>
<div class="card-body">
<h3 class="card-title player-name">
Olle
Forsell Schefvert
</h3>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element player-card ### -->
{% extends '@wrapper-frame' %}
{% set CType = 'player-card' %}
{% block main %}
<div class="row">
{% for player in squad %}
<div class="col-md-6 col-lg-4">
<a href="" class="card">
<div class="card-image player-image">
<div class="player-number">
<span class="sr-only">Spielernummer:</span>{{ player.player_number }}
</div>
<img src="{{ player.image }}"
title="{{ player.player_firstname }} {{
player.player_lastname
}}" />
</div>
<div class="card-body">
<h3 class="card-title player-name">
{{ player.player_firstname }}
{{ player.player_lastname }}
</h3>
</div>
</a>
</div>
{% endfor %}
</div>
{% endblock %}
{
"squad": [
{
"_id": 1,
"_sid": "119020",
"player_firstname": "Maximilian",
"player_lastname": "Holst",
"player_birthdate": "1989-06-23",
"image": "../../common/img/dummy-images/HSG_Wetzlar_Holst_Maximilian_22_Ganzkoerper_900x1425.png",
"age": 31,
"nationality": "Germany",
"goals": 64,
"matches": 14,
"weight": 0,
"height": 180,
"contracts": [
{
"eligibility": "main_agreement",
"start": "2014-07-01",
"end": "2022-06-30",
"position": "Left Wing",
"number": 22,
"club_id": 1,
"club_name": "HSG Wetzlar"
}
],
"previous_club": {
"_id": 19,
"_sid": "3985",
"name": "TV Großwallstadt",
"abbreviation": "TVG",
"colors": {
"name": "",
"color_1": "",
"color_2": ""
},
"calovo": "https://calovo.de/f/tvgrosswallstadt/spielplan"
},
"player_number": 22,
"player_position": "Left Wing",
"contract_start": "2014-07-01",
"contract_end": "2022-06-30"
},
{
"_id": 16,
"_sid": "905048",
"player_firstname": "Kristian",
"player_lastname": "Bjornsen",
"player_birthdate": "1989-01-10",
"image": "../../common/img/dummy-images/HSG_Wetzlar_Bjoernsen_Kristian_7_Ganzkoerper_900x1425.png",
"sponsor": {
"image": "../../common/img/dummy-images/arnold-gruppe.svg",
"name": "Arnold Gruppe"
},
"age": 32,
"nationality": "Norway",
"goals": 54,
"matches": 15,
"weight": 86,
"height": 191,
"contracts": [
{
"eligibility": "main_agreement",
"start": "2016-07-01",
"end": "2021-06-30",
"position": "Right Wing",
"number": 7,
"club_id": 1,
"club_name": "HSG Wetzlar"
}
],
"previous_club": {
"_id": 29,
"_sid": "22064",
"name": "IFK Kristianstad",
"abbreviation": "KRI",
"colors": {
"name": "",
"color_1": "",
"color_2": ""
},
"calovo": ""
},
"player_number": 7,
"player_position": "Right Wing",
"contract_start": "2016-07-01",
"contract_end": "2021-06-30"
},
{
"_id": 3,
"_sid": "119020",
"player_firstname": "Olle",
"player_lastname": "Forsell Schefvert",
"image": "../../common/img/dummy-images/HSG_Wetzlar_Forsell_Schefvert_Olle-25_Ganzkoerper_900x1425.png",
"player_number": 25
}
]
}
.frame-type-player-card {
.row {
margin-bottom: -#{$grid-gutter-width};
> div {
margin-bottom: $grid-gutter-width;
}
}
.card {
height: 100%;
.player-image {
background-color: $dark;
position: relative;
padding-top: 75%;
overflow: hidden;
&::before {
content: '';
@include position(absolute, 0);
display: block;
opacity: .08;
background-image: url(../img/field.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
filter: grayscale(100%);
pointer-events: none;
transition: $transition-base;
}
img {
@include position(absolute, 20px null null 0);
width: 100%;
}
}
.player-number {
@include position(absolute, 30px null null 35px);
@include Rift-Bold;
color: $secondary;
font-size: $display3-size;
line-height: 0.8;
transition: $transition-base;
transform-origin: center;
}
.card-body {
align-items: center;
}
.card-body,
.card-title {
transition: $transition-base;
}
@include hover-focus {
text-decoration: none;
.player-image::before {
transform: scale(1.1);
}
.player-number {
transform: scale(1.1);
}
.card-body {
background-color: $primary;
}
.card-title {
color: $white;
}
}
}
}
No notes defined.