From 402800b0c2efc1e67e26eae0c15b653341c7a5d4 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 10 Dec 2021 00:24:50 +0100
Subject: [PATCH] Update resource styling for BEM

---
 .../content/108-css-architecture/100-bem.md           | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md b/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md
index dc9b2e2be..d546122bb 100644
--- a/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md
+++ b/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>