feat: add avatar & badge & card comps && update sub modules refs.

.gitmodules

@@ -49,3 +49,12 @@
 [submodule "hero"]
 	path = hero
 	url = https://github.com/opensass/hero
+[submodule "card-rs"]
+	path = card-rs
+	url = https://github.com/opensass/card-rs.git
+[submodule "avatar"]
+	path = avatar
+	url = https://github.com/opensass/avatar.git
+[submodule "badges-rs"]
+	path = badges-rs
+	url = https://github.com/opensass/badges-rs.git

book.toml

@@ -6,6 +6,7 @@ title = "Open SASS Components Kit"
 
 [preprocessor.tabs]
 
+
 [output.html]
 additional-css = ["theme/main.css", "theme/tabs.css"]
 additional-js = ["theme/tabs.js"]

src/SUMMARY.md

@@ -6,9 +6,9 @@
 - [Components](./components.md)
   - [Data Display]()
     - [Accordion](./components/accordion-rs.md)
-    - [Avatar (TODO)]()
-    - [Badge (TODO)]()
-    - [Card (TODO)]()
+    - [Avatar](./components/avatar-rs.md)
+    - [Badge](./components/badges-rs.md)
+    - [Card](./components/card-rs.md)
     - [Code (TODO)]()
     - [Image](./components/image-rs.md)
     - [Snippet (TODO)]()

src/components/avatar-rs.md

@@ -0,0 +1,110 @@
+# Avatar RS
+
+{{#tabs }}
+
+{{#tab name="Yew" }}
+
+<a 
+  href="https://github.com/opensass/avatar"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../avatar/YEW.md}}
+
+## Usage
+
+<iframe
+  src="https://avatar-rs.netlify.app"
+  title="Avatar RS Yew Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Yew example using Avatar RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Avatar RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add avatar yew
+```
+
+{{#endtab}}
+
+{{#tab name="Dioxus"}}
+
+<a 
+  href="https://github.com/opensass/avatar"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../avatar/DIOXUS.md}}
+
+## Usage
+
+<iframe
+  src="https://avatar-rs.netlify.app"
+  title="Avatar RS Dioxus Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Dioxus example using Avatar RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Avatar RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add avatar dio
+```
+
+{{#endtab}}
+
+{{#tab name="Leptos"}}
+
+<a 
+  href="https://github.com/opensass/avatar"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../avatar/LEPTOS.md}}
+
+## Usage
+
+<iframe
+  src="https://avatar-rs.netlify.app"
+  title="Avatar RS Leptos Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Leptos example using Avatar RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Avatar RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add avatar lep
+```
+
+{{#endtab }}
+
+{{#endtabs }}

src/components/badges-rs.md

@@ -0,0 +1,110 @@
+# Badges RS
+
+{{#tabs }}
+
+{{#tab name="Yew" }}
+
+<a 
+  href="https://github.com/opensass/badges-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../badges-rs/YEW.md}}
+
+## Usage
+
+<iframe
+  src="https://badges-rs.netlify.app"
+  title="Badges RS Yew Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Yew example using Badges RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Badges RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add badges-rs yew
+```
+
+{{#endtab}}
+
+{{#tab name="Dioxus"}}
+
+<a 
+  href="https://github.com/opensass/badges-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../badges-rs/DIOXUS.md}}
+
+## Usage
+
+<iframe
+  src="https://badges-rs.netlify.app"
+  title="Badges RS Dioxus Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Dioxus example using Badges RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Badges RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add badges-rs dio
+```
+
+{{#endtab}}
+
+{{#tab name="Leptos"}}
+
+<a 
+  href="https://github.com/opensass/badges-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../badges-rs/LEPTOS.md}}
+
+## Usage
+
+<iframe
+  src="https://badges-rs.netlify.app"
+  title="Badges RS Leptos Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Leptos example using Badges RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Badges RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add badges-rs lep
+```
+
+{{#endtab }}
+
+{{#endtabs }}

src/components/card-rs.md

@@ -0,0 +1,110 @@
+# Card RS
+
+{{#tabs }}
+
+{{#tab name="Yew" }}
+
+<a 
+  href="https://github.com/opensass/card-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../card-rs/YEW.md}}
+
+## Usage
+
+<iframe
+  src="https://card-rs.netlify.app"
+  title="Card RS Yew Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Yew example using Card RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Card RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add card-rs yew
+```
+
+{{#endtab}}
+
+{{#tab name="Dioxus"}}
+
+<a 
+  href="https://github.com/opensass/card-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../card-rs/DIOXUS.md}}
+
+## Usage
+
+<iframe
+  src="https://card-rs.netlify.app"
+  title="Card RS Dioxus Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Dioxus example using Card RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Card RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add card-rs dio
+```
+
+{{#endtab}}
+
+{{#tab name="Leptos"}}
+
+<a 
+  href="https://github.com/opensass/card-rs"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../card-rs/LEPTOS.md}}
+
+## Usage
+
+<iframe
+  src="https://card-rs.netlify.app"
+  title="Card RS Leptos Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Leptos example using Card RS"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Card RS directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add card-rs lep
+```
+
+{{#endtab }}
+
+{{#endtabs }}