O guia de cursos presente em https://www.ifms.edu.br/cursos utiliza o plugin JavaScript https://isotope.metafizzy.co/ para criar os filtros referentes aos campi que os cursos estão relacionados.

Na aba “Compor” da capa referente ao link citado acima https://www.ifms.edu.br/cursos/guia-de-cursos/compose é incluso o HTML referentes aos cursos, como as imagens e os links para acessar as páginas específicas de cada curso em cada campus.

O atributo data-filter=“.campo-grande” filtra os elementos que possui a classe .campo-grande referente ao Campus Campo Grande, por exemplo.

O trecho do código HTML abaixo foi usado para incluir o curso Técnico Integrado em Eletrotécnica no Guia de Cursos. Ele seria filtrado quando selecionado o Campus Campo Grande ou o Campus Três Lagoas no filtro.

 <div class="campo-grande tres-lagoas"><img alt="Técnico Integrado em Eletrotécnica" src="../imagens/cursos/links-medio/eletrotecnica-menor" />
  <ul class="local-oferta">
    <li class="campus"><a href="../campi/campus-campo-grande/cursos/integrados/eletrotecnica">Campo Grande</a></li>
    <li class="campus"><a href="../campi/campus-tres-lagoas/cursos/integrado/eletrotecnica">Três Lagoas</a></li>
  </ul>
 </div>