[gesichtete Version] | [gesichtete Version] |
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 2: | Zeile 2: | ||
Snippet | Snippet | ||
<syntaxhighlight lang="html" | <syntaxhighlight lang="html"> | ||
<div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%"> | <div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%"> | ||
<div class="col"> | <div class="col"> | ||
Zeile 29: | Zeile 29: | ||
Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden: | Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden: | ||
<syntaxhighlight lang="html" | <syntaxhighlight lang="html"> | ||
<div class="media"> | <div class="media"> | ||
<img src="$BildURL" alt="$Name" width="240" height="240" class="img-fluid atto_image_button_text-bottom align-self-center mr-3" style="padding: 30px;"> | <img src="$BildURL" alt="$Name" width="240" height="240" class="img-fluid atto_image_button_text-bottom align-self-center mr-3" style="padding: 30px;"> |
Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung in Kartenform empfohlen (rows und cols jeweils anpassen):
Snippet
<div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%">
<div class="col">
<div class="card h-100">
<div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
<div class="card-body">
<h5 class="card-title">$Name</h5>
<p class="card-text" style="text-align: left;">$Beschreibung</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
<div class="card-body">
<h5 class="card-title">$Name</h5>
<p class="card-text" style="text-align: left;">$Beschreibung</p>
</div>
</div>
</div>
</div>
<p><br></p>
Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden:
<div class="media">
<img src="$BildURL" alt="$Name" width="240" height="240" class="img-fluid atto_image_button_text-bottom align-self-center mr-3" style="padding: 30px;">
<div class="media-body">
<h5 class="card-title">$Name</h5>
<p class="card-text" style="text-align: left;">$BeschreibungETC</p>
</div>
</div>