go.dev/themes/default/layouts/learn/section.html

{{define "main"}}
<section class="Learn-title">
  <div class="Container">
    <h1>Getting Started</h1>
  </div>
</section>
<section class="Learn-gettingStarted">
  <div class="Container">
    <ul class="Learn-quickstarts">
      {{range first 3 $.Site.Data.learn.quickstart.links}}
      <li class="Learn-quickstart">
        <a href="{{.url}}">
          <div class="Learn-quickstartThumbnail">
            {{if .thumbnail}}
              <img src="{{.thumbnail}}" alt="{{.title}} thumbnail.">
            {{end}}
          </div>
          <p class="Learn-quickstartTitle">
            {{.title}}
          </p>
        </a>
      </li>
      {{end}}
    </ul>
    <p class="Learn-actions">
      <a class="Learn-viewMoreButton" href="#">View More &gt;</a>
    </p>
  </div>
</section>
<section class="Learn-guided">
  <div class="Container">
    <div class="Learn-subHeader">
      <h2>Guided Learning Journeys</h2>
      <p class="Learn-viewMore">
        <a href="#">View More &gt;</a>
      </p>
    </div>
    <ul class="Learn-tileList">
      {{range first 4 $.Site.Data.learn.guidedLearning.links}}
      <li class="Learn-tile">
        <a href="{{.url}}">
          <div class="Learn-tileThumbnail">
            {{if .thumbnail}}
            <img alt="{{.title}} thumbnail." src="{{.thumbnail}}">
            {{end}}
          </div>
          <p class="Learn-tileTitle">
            {{.title}}
          </p>
        </a>
      </li>
      {{end}}
    </ul>
  </div>
</section>
<section class="Learn-online">
  <div class="Container">
    <div class="Learn-subHeader">
      <h2>Online Learning</h2>
        {{if gt (len $.Site.Data.learn.courses.links) 4}}
          <a href="#">View More &gt;</a>
        {{end}}
    </div>
    <ul class="Learn-tileList">
      {{range first 4 $.Site.Data.learn.courses.links}}
      <li class="Learn-tile">
        <a href="{{.url}}">
          <div class="Learn-tileThumbnail">
            {{if .thumbnail}}
            <img alt="{{.title}} thumbnail." src="{{.thumbnail}}">
            {{end}}
          </div>
          <p class="Learn-tileTitle">
            {{.title}}
          </p>
        </a>
      </li>
      {{end}}
    </ul>
  </div>
</section>
<section class="Learn-books">
  <div class="Container">
    <div class="Learn-subHeader">
      <h2>Featured Books</h2>
      <p class="Learn-viewMore">
        {{if gt (len $.Site.Data.learn.books.links) 5}}
          <a href="#">View More &gt;</a>
        {{end}}
      </p>
    </div>
    <ul class="Learn-tileList">
      {{range first 5 $.Site.Data.learn.books.links}}
      <li class="Learn-tile">
        <a href="{{.url}}">
          <div class="Learn-tileThumbnail Learn-tileThumbnail--book">
            {{if .thumbnail}}
            <img alt="{{.title}} thumbnail." src="{{.thumbnail}}">
            {{end}}
          </div>
          <p class="Learn-tileTitle">
            {{.title}}
          </p>
        </a>
      </li>
      {{end}}
    </ul>
  </div>
</section>
<section class="Learn-inPersonTraining">
  <div class="Container">
    <div class="Learn-subHeader">
      <h2>In Person Training</h2>
      <p class="Learn-viewMore">
        <a href="#">View More &gt;</a>
      </p>
    </div>
    <ul class="Learn-inPersonList">
      {{range first 4 $.Site.Data.learn.inPerson.links}}
      <li class="Learn-inPerson">
        <p class="Learn-inPersonTitle">
          <a href="{{.url}}">
            {{.title}}
          </a>
        </p>
        <p class="Learn-inPersonBlurb">
          {{.blurb}}
        </p>
      </li>
      {{end}}
    </ul>
  </div>
</section>
<section class="Learn-meetups">
  <div class="Container">
    <div class="Learn-subHeader">
      <h2>Meetups</h2>
      <p class="Learn-viewMore">
        <a href="#">View More &gt;</a>
      </p>
    </div>
    <ul class="Learn-events">
      {{range first 3 $.Site.Data.events.all}}
      <li class="Learn-eventItem">
        <div class="Learn-eventThumbnail {{if not .thumbnailurl}}Learn-eventThumbnail--noimage{{end}}">
          {{if .thumbnailurl}}
          <img alt="{{.name}} group photo." src="{{.thumbnailurl}}"/>
          {{end}}
        </div>
        <div class="Learn-eventBody">
          <div class="Learn-eventDate">
            <p>{{.local_date}}</p>
            <p>{{.city}}, {{.state}} {{.country}}</p>
          </div>
          <div class="Learn-eventText">
            <h4 class="Learn-eventName">
              <a href="{{.url}}">{{.name}}</a>
            </h4>
            <p class="Learn-eventDescription">
              {{.description | safeHTML}}
            </p>
          </div>
          <p class="Learn-viewMore"><a href="{{.url}}">Learn more &gt;</a></p>
        </div>
      </li>
      {{end}}
    </ul>
  </div>
</section>
{{end}}