Mobile First | Responsive product preview card component with Flexbox

Eaí Alexandre, beleza?

Grid x Flexbox

Utilizar grid ou flexbox fica a critério do desenvolvedor. Use o que for mais confortável para você. O que importa neste caso é o resultado.

Eu, particularmente, gosto de utilizar flexbox em cards, pois o layout não é tão complexo à ponto de utilizar grid, e flexbox é mais rápido de se escrever, na minha opinião.

Utilizando o icon

1. Adicione o CDN do FontAwesome na tag head do seu projeto
2. Vá até o website do FontAwesome e pesquise por 'chart'. Você irá achar o HTML necessário para adicionar o ícone no seu botão. Basta copiar e colar o HTML que estará lá.

Sobre o design do botão

Acho que a sua dúvida se deve ao fato de o seu card estar um pouco maior que o do design. Nada demais.

Além de faltar o ícone do carrinho e a fonte estar um pouco menor comparada ao design, não vejo nada de errado no botão.

Melhorando o CSS

Meus parabéns pelo CSS, ficou organizado, responsivo e parecido com o design. Recomendo dar uma olhada no website do BEMCSS, vai te ajudar a dar bons nomes para suas classes e evitar confusão com CSS em projetos grandes.

Espero ter ajudado

Vlw, flw!