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/
-- BEM Official Website: https://en.bem.info/
-- BEM Documentation: https://en.bem.info/methodology/quick-start/ 
-- BEM Tutorials: https://en.bem.info/tutorials/
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://en.bem.info/methodology/quick-start'>BEM Documentation</BadgeLink>
+<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>