If you need more tiles, all you need to do is copy the code below and go into the code editor in Moodle page and paste the code. Then you can close the code editor and edit the page as normal. I have indicated in the code below where to start copying and where to paste. Don’t change the styling because it will break the page. The word “important” below is used to override the CSS of Moodle. Leave it in the code. You can get the emojis you want from this website: https://emojipedia.org/

<div class="container-fluid my-4"
  style="max-width: 1280px; margin-left: auto; margin-right: auto; padding: 16px;">
  <div
    style="background: #123e7c; border-radius: 18px; padding: 24px; margin-bottom: 24px; box-shadow: 0 10px 28px rgba(18,62,124,.18);">
    <div
      style="font-size: 13px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; opacity: .95; color: #ffffff !important;">
      School of Law</div>
    <h1
      style="margin: 10px 0 12px; font-size: 34px; line-height: 1.15; font-weight: bold; color: #ffffff !important; display: block;">
      Undergraduate Student Welcome Hub (find everything here)</h1>
    <p
      style="margin: 0; font-size: 17px; line-height: 1.6; color: #ffffff !important;">
      The title and description can be edited safely. Only the small description
      text is linked, so the card layout stays more stable in Moodle.</p>
  </div>
  <h2
    style="margin: 0 0 18px; font-size: 28px; font-weight: bold; color: #123e7c;">
    Quick links</h2>
  <div class="row" style="row-gap: 18px;">
//Start copying from here//    
<div class="col-12 col-sm-6 col-lg-4 col-xl-3"
      style="padding-left: 12px; padding-right: 12px;">
      <div
        style="background: #ffffff; border: 1px solid #d9e3f0; border-radius: 18px; padding: 22px; height: 100%; box-shadow: 0 6px 16px rgba(20,48,91,.08); display: flex; flex-direction: column; gap: 12px;">
        <div style="font-size: 30px; line-height: 1;">👥</div>
        <h3
          style="margin: 0; font-size: 22px; line-height: 1.2; font-weight: bold; color: #24364b;">
          Student Support Officer &amp; Academic Advisor</h3>
        <p
          style="margin: 0; font-size: 15px; line-height: 1.6; color: #5a6b80;">
          <a style="color: #1f5ca8; text-decoration: underline; font-weight: 600;"
            href="https://www.google.com" target="_blank"
            rel="noopener noreferrer">Direct students to support contacts,
            guidance, and academic advice.</a></p>
      </div>
    </div>
    <br>
//Stop copying after the break tag <br> (include the break tag in the copied code) then paste under it however many times you want to get the desired number of tiles//
  </div>
</div>

No results