7.2.2.1 Personenprofile

[gesichtete Version][gesichtete Version]
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung empfohlen:
Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung in Kartenform empfohlen (rows und cols jeweils anpassen):


== Snippet ==
Snippet
<syntaxhighlight lang="html" line>
<syntaxhighlight lang="html">
<h4>$NAME</h4>  
<div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%">
<div class="container-fluid">
    <div class="col">
<div class="row">
        <div class="card h-100">
<div class="col-md-8 pl-0">
            <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>
<p>$Beschreibung</p>
            <div class="card-body">
<p>$ggfKontaktdaten</p>
                <h5 class="card-title">$Name</h5>
</div>
                <p class="card-text" style="text-align: left;">$Beschreibung</p>
<div class="col-md-4">
            </div>
<img src="$BildURL" alt="Anja Lorenz" width="270" height="270" class="img-responsive atto_image_button_text-bottom img-circle">
        </div>
</div>
    </div>
</div>
    <div class="col">
</div>  
        <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>
</syntaxhighlight>
 
== Alternative Darstellung als Liste ==
Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden:
 
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
</syntaxhighlight>

Aktuelle Version vom 18. Oktober 2023, 12: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>