Update resource styling for BEM

content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md

@@ -1,8 +1,9 @@
-# Bem
+# BEM
 
 The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
 
-- Article BEM 101: https://css-tricks.com/bem-101/
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-- BEM Official Website: https://en.bem.info/
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
-- BEM Documentation: https://en.bem.info/methodology/quick-start/ 
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://en.bem.info/methodology/quick-start'>BEM Documentation</BadgeLink>
-- BEM Tutorials: https://en.bem.info/tutorials/
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://css-tricks.com/bem-101'>BEM 101</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.bem.info/tutorials/'>BEM Tutorials</BadgeLink>