Benutzerfreundliches HTML-Beispiel zur Nutzung unserer Kacheln/Karten/Tiles zum Organisieren von Content in Moodle
The snippet can be accessed without any authentication.
Authored by
Dennis Grabowski
Beispielcode für: 2 Reihen, 3 Kacheln
example.html 17.54 KiB
<!------
Below is a MVP showcasing the cards/tiles we could use on our website.
This isn't the only way to do this, and you can play around with it a bit until it fits your liking. For example, it does not need to be 3 cards in a row nor does it need to only have 2 rows. You can design the content in whatever way you want.
However, there are limits to this - we have included Bootstrap 4.6.2 in our Moodle. Please check their documentation if you need something specific. This is called a "grid", so most likely you will find the information you need there:
* https://getbootstrap.com/docs/4.6/layout/grid/
* https://getbootstrap.com/docs/4.6/components/card/
How-to (basic):
* Add a new text/media area in your Moodle course
* Edit newly created field via the text editor
* Change into the "HTML mode": to do so, find the button that looks like "</>" and click it.
* Copy this entire block into your editor in Moodle
* Insert your content where needed / applicable
* Save it
* Inspect your work afterwards for visual errors
How to change the layout:
* If you need more than 2 rows, copy a whole row section (marked via comments, i.e. copy from comment "start of ... row" up to and including comment "end of ... row") and append it to the end of this example: to be specific, right BEFORE the last `</div>`-tag. The rows need to be defined inside that HTML element.
* If you need more cards/tiles in a row, copy a whole card section (similar concept as before, copy from comment "start of ... card" up to and including "end of ... card") and append it to the end of the row declaration (should be marked with a comment, e.g. "end of 2nd row").
* You also need to change the class of the rows, e.g.: ´<div class="row row-cols-1 row-cols-md-3 "...>´ - the 3 at the end needs to be changed to a 4 if you want 4 cards in a row.
* You will need to use HTML elements to implement buttons, images, links, etc.
* I have added a few examples (commented out) to show how they could be implemented.
* To make the examples visible, remove the comment declarations around the corresponding HTML tags, i.e. "the arrows".
* Familiarize yourself with that (plenty of good online tutorials for that) or ask your trusted colleagues
* Delete the TODOs ;)
------->
<div class="no-overflow">
<!------ start of 1st row ------->
<div class="row row-cols-1 row-cols-md-3 " style="max-width:100%;">
<!------ start of 1st card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 1st card/tile ------->
<!------ start of 2nd card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 2nd card/tile ------->
<!------ start of 3rd card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 3rd card/tile ------->
</div>
<!------- end of 1st row ------>
<br>
<!------ start of 2nd row ------->
<div class="row row-cols-1 row-cols-md-3 " style="max-width:100%;">
<!------ start of 1st card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 1st card/tile ------->
<!------ start of 2nd card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 2nd card/tile ------->
<!------ start of 3rd card/tile ------->
<div class="col">
<div class="card h-100">
<!------ TODO: Change background-color if needed; else remove style ------->
<div class="card-header" style="background-color: #000000;">
<!------ TODO: Insert card title / header content ------->
</div>
<!------ Example image on top in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-top" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-body">
<h5 class="card-title"><!------ TODO: Insert content title -------></h5>
<p class="card-text"><!------ TODO: Insert your content - text can go in this directly, other stuff: links via <a> tag, buttons via <buttons> tags, images via <img> tag, ..-------></p>
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/" class="btn btn-primary" target="_blank">Text of link/button</a>
------->
<!------ Example image - change the link inside the quotation marks if you wanna add your own image. ------->
<!------
<img src="https://moodle.hs-hannover.de/pluginfile.php/1/theme_boost_union/logocompact/300x300/1692979155/H_Dach-Athrazit_RGB_87_82_80.png" alt="" role="presentation" style="align: center" class="img-fluid atto_image_button_text-bottom" width="73" height="32">
------->
</div>
<!------ Example image on bottom in content - change the link inside the quotation marks to the website you need. ------->
<!------
<img class="card-img-bottom" src="INSERT_LINK_TO_IMAGE" alt="INSERT_ALT_TEXT">
------->
<div class="card-footer">
<!------ Example link / button - change the link inside the quotation marks to the website you need. ------->
<!------
<a href="https://moodle.hs-hannover.de/"" class="btn btn-primary w-100" type="button">Text of button</a>
------->
</div>
</div>
</div>
<!------ end of 3rd card/tile ------->
</div>
<!------- end of 2nd row ------>
</div>
Please register or sign in to comment