<section class="business_card">
<h2>Title of Card</h2>
<h3>Person Name</h3>
<div class="business_card-content">
<p>This is the top content.</p>
</div><!-- end business_card-content -->
<div class="contact_info">
<div class="contact">
<div class="contact_item"><span class="fas fa-envelope"><span class="sr-only">Email address:</span></span> <a href="mailto:longemail@lehigh.edu">longemail@lehigh.edu</a></div><!-- end contact item -->
<div class="contact_item"><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> (610) 758 0001</div><!-- end contact item -->
<div class="contact_item"><span class="fas fa-fax"><span class="sr-only">Fax Number:</span></span> (610) 758 0002</div><!-- end contact item -->
</div><!-- end contact -->
</div><!-- end contact_info -->
<div class="business_card-content">
<p>This is bottom content.</p>
</div><!-- end business_card-content -->
</section>
<section class="business_card">
{% block heading %}
<h2>{{ card_title }}</h2>
{% endblock %}
{% block subheading %}
<h3>{{ person_name }}</h3>
{% endblock %}
{% block top_content %}
{% if top_content %}
<div class="business_card-content">
<p>{{ top_content }}</p>
</div><!-- end business_card-content -->
{% endif %}
{% endblock %}
<div class="contact_info">
<div class="contact">
{% block email %}
{% if email %}
<div class="contact_item"><span class="fas fa-envelope"><span class="sr-only">Email address:</span></span> <a href="mailto:{{ email }}">{{ email }}</a></div><!-- end contact item -->
{% endif %}
{% endblock %}
{% block phone %}
{% if phone %}
<div class="contact_item"><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> {{ phone }}</div><!-- end contact item -->
{% endif %}
{% endblock %}
{% block fax %}
{% if fax %}
<div class="contact_item"><span class="fas fa-fax"><span class="sr-only">Fax Number:</span></span> {{ fax }}</div><!-- end contact item -->
{% endif %}
{% endblock %}
</div><!-- end contact -->
</div><!-- end contact_info -->
{% block bottom_content %}
{% if bottom_content %}
<div class="business_card-content">
<p>{{ bottom_content }}</p>
</div><!-- end business_card-content -->
{% endif %}
{% endblock %}
</section>
{
"card_title": "Title of Card",
"person_name": "Person Name",
"top_content": "This is the top content.",
"email": "longemail@lehigh.edu",
"phone": "(610) 758 0001",
"fax": "(610) 758 0002",
"bottom_content": "This is bottom content."
}
.business_card {
margin: $space_two 0 0 0;
background-color: $accent_color;
background-color: var(--accent_color, $accent_color);
color: $grey_darkest;
border: 3px solid $white;
border: 3px solid var(--white, $white);
padding: $space_and_half;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@include media-breakpoint-up(md) {
margin: $space_three 0 0 0;
width: 100%;
max-width: 400px;
}
h2 {
font-size: 1.5rem;
text-align: center;
margin: 0 0 $spacer 0;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
h3 {
font-size: 1.2rem;
margin: 0 0 $space_one_half 0;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
.contact_info {
margin: 0;
padding: 0;
list-style: none;
.contact_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 0 0 $space_one_half 0;
word-break: break-all;
&:last-of-type {
margin: 0;
}
.fas {
margin: 0 $space_one_quarter 0 0;
}
a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-end;
color: $grey_darkest;
text-decoration: none;
font-weight: normal;
border: 0;
&:hover,
&:focus {
text-decoration: underline;
}
}
i {
margin: 0 $space_one_half 0 0;
}
}
}
.accent-lehigh_brown &,
.accent-blue_k60 & {
color: $white;
color: var(--white, $white);
h2,
h3 {
color: $white;
color: var(--white, $white);
}
.contact_info {
.contact_item {
a {
color: $white;
color: var(--white, $white);
}
}
}
}
.business_card-content {
margin: $space_one_half 0 0 0;
p {
margin: 0;
}
}
.contact_info {
margin: $space_one_half 0;
}
}
.office-card {
text-align: center;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
background-color: $off_white;
background-color: var(--off_white, $off_white);
padding: $spacer $space_two;
width: 300px;
min-height: 150px;
border-top: 5px solid $accent_color;
border-top: 5px solid var(--accent_color, $accent_color);
margin: 0 $spacer $space_two $spacer;
-webkit-box-shadow: 0 5px 15px $drop_shadow;
-moz-box-shadow: 0 5px 15px $drop_shadow;
box-shadow: 0 5px 15px $drop_shadow;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
color: $white;
color: var(--white, $white);
-webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
-moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
box-shadow: 0 5px 15px $drop_shadow_darkmode;
}
&:hover,
&:focus-within {
-webkit-box-shadow: 0 0 10px $drop_shadow;
-moz-box-shadow: 0 0 10px $drop_shadow;
box-shadow: 0 0 10px $drop_shadow;
.color-scheme-dark & {
-webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
-moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
box-shadow: 0 0 10px $drop_shadow_darkmode;
}
}
.office-card_link {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
h3 {
font-size: 1.5rem;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
}
}
Display business card for contact information for sidebar.