hugo-toha/layouts/partials/cards/skill.html

<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
  <a class="skill-card-link" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
    <div class="card">
      <div class="card-head d-flex">
        {{ if .logo }}
          {{ $logoImage := resources.Get .logo }}
          {{/*  svg don't support "Fit" operation   */}}
          {{ if ne $logoImage.MediaType.SubType "svg" }}
            {{ $logoImage = $logoImage.Fit "24x24" }}
          {{ end }}
        
          <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
          <h5 class="card-title">{{ .name }}</h5>
        {{ else if .icon }}
          {{ $iconName := .icon }}
          <h5 class="card-title"><span class="{{ $iconName }}"> {{ .name }}</span></h5>
        {{ else }}
          <h5 class="card-title">{{ .name }}</h5>
        {{ end }}
      </div>
      <div class="card-body">
        <p class="card-text">{{ .summary | markdownify }}</p>
      </div>
    </div>
  </a>
</div>