7.2.2.1 Personenprofile

[gesichtete Version][gesichtete Version]
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
Zeile 2: Zeile 2:


Snippet
Snippet
<syntaxhighlight lang="html" line>
<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" line>
<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;">

Aktuelle Version vom 18. Oktober 2023, 11:02 Uhr

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>

Alternative Darstellung als Liste

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>