Design Barcard

← zurück zum Design Framework

Verantwortlicher: Patrick Puritscher

Beschreibung: Eine Barcard kommt primär in der Liste big zum Einsatz und definiert die Darstellung der Barinformationen in der Vorder- und Switchseite.

Betroffende Dateien: elements.css

Eingebundene Bibliotheken: -

---

HTML

Zum besseren Verständnis sind die Klassen der Liste big enthalten.

<div class="e__list-big-element-frontside e__barcard" style="background-image: url('images/bars/1.jpg')">
	<div class="e__list-big-element-frontside-head e__barcard-head grid">
		<div class="col-7">
			<a class="when__expanded__show i__close"></a>
			<h3><span class="when__expanded__hidden">1.</span>Hascienda</h3>
		</div>
		<span class="col-5 align-right timeslot">18:30 - 19:30</span>
	</div>
	<div class="e__list-big-element-frontside-body e__barcard-body clearfix">
		<div class="e__list-big-element-frontside-body-main">
			<p class="e__quote">„Seit 1991 der temperamentvolle Mexikaner in Stuttgart! Erleben Sie die richtige Mischung aus vielfältigen mexikanischen Gaumenfreuden und bester Unterhaltung“</p>
		</div>
		<div class="e__list-big-element-frontside-body-expand grid when__expanded__show">
			<div class="col-8">
				<h4>Öffnungszeigen</h4>
				<table class="e__table grid">
					<tbody>
						<tr>
							<td class="col-5">Montag bis Freitag</td>
							<td class="col-7">ab 09:00 Uhr</td>
						</tr>
						<tr>
							<td class="col-5">Samstag und Sonntag</td>
							<td class="col-7">ab 12:00 Uhr</td>
						</tr>
					</tbody>
				</table>
				<h4>Happy Hour</h4>
				<div class="padding-default">
					Jeden Tag 00:00 - 24:00
					<br>
					<strong>alle Cocktails für 4,99€</strong>
				</div>
			</div>
			<div class="col-4">
				<div class="map" style="background:url('images/_dummy_map.png')">
				</div>
			</div>
		</div>
	</div>
	<div class="e__list-big-element-frontside-footer e__barcard-footer">
		<span class="col-5"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
		<span class="col-2"></span><span class="col-5 align-right e__rating"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span><span class="e__rating-description">(5/10)</span></span>
	</div>
</div>

CSS

elements.css

/** Barcard **/

.e__barcard {
    background: #452e2e;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.e__barcard-head,
.e__barcard-body,
.e__barcard-footer {
    float: left;
    width: 100%;
}

.e__barcard-head,
.e__barcard-footer {
    padding: 10px;
}

.e__barcard-footer {
    padding: 10px;
}

.e__barcard-head h3 {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    display: inline-block;
}

.e__barcard-head .i__close {
    top: 3px;
    margin-right: 10px;
}

.e__barcard-head .timeslot {
    font-size: 0.8rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.e__barcard-body {
    padding: 0px 10px 0px 20px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.e__barcard-body h4 {
    font-size: 0.84rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.e__barcard-body h4:not(:first-of-type) {
    margin-top: 20px;
}

.e__barcard-body strong {
    font-weight: 500;
}

.e__barcard-body .e__barcard-body-map {
    width: 100%;
    height: 100px;
    border: 2px solid #fff;
    margin-top: 20px;
    margin-bottom: 5px;
}

.e__barcard-body .e__barcard-body-btn-melden {
    margin-top: 20px;
}

.e__barcard-small .e__barcard-head {
    padding: 2px 10px;
}

.e__barcard-small .e__barcard-body {
    max-height: 70px;
    overflow-y: hidden;
    position: relative;
    z-index: 98;
}

.e__barcard-small .e__barcard-body .e__quote {
    margin: 5px 0;
}

/** /Barcard **/