Feat - added List

Mohasin-Haque · Feb 20, 2022 · 021f84d · 021f84d
1 parent 7ade108
commit 021f84d
Showing 1 changed file with 40 additions and 6 deletions.
diff --git a/pages/typography.html b/pages/typography.html
@@ -56,12 +56,46 @@ <h3 class="heading heading-avatar">Headings</h3>
             src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=true&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%253E%2520h1.%2520Headline%25201%253C%252Fh1%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%253E%2520h2.%2520Headline%25202%253C%252Fh2%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch3%253E%2520h3.%2520Headline%25203%253C%252Fh3%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%253E%2520h4.%2520Headline%25204%253C%252Fh4%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch5%253E%2520h5.%2520Headline%25205%253C%252Fh5%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch6%253E%2520h5.%2520Headline%25206%253C%252Fh6%253E"
             sandbox="allow-scripts allow-same-origin">
         </iframe>
-        <h1> h1. Headline 1</h1>
-        <h2> h2. Headline 2</h2>
-        <h3> h3. Headline 3</h3>
-        <h4> h4. Headline 4</h4>
-        <h5> h5. Headline 5</h5>
-        <h6> h5. Headline 6</h6>
+        <div class="badge_container-main flex-center">
+            <h1> h1. Headline 1</h1>
+            <h2> h2. Headline 2</h2>
+            <h3> h3. Headline 3</h3>
+            <h4> h4. Headline 4</h4>
+            <h5> h5. Headline 5</h5>
+            <h6> h6. Headline 6</h6>
+        </div>
+        <h3 class="heading heading-avatar">Ordered list</h3>
+        <p class="description description-avatar">You can use <span class="colored-text"> ol </span> tag for
+            ordered list as shown below. </p>
+        <iframe class="code-snippet-display"
+            src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=823&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=false&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%2520%2520%2520%2520%2520%2520%252F%252F%2520Ordered%2520List%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Col%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25201%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25202%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25203%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25204%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25205%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fol%253E"
+            sandbox="allow-scripts allow-same-origin">
+        </iframe>
+        <div class="badge_container-main flex-center">
+            <ol>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                <li>Item 4</li>
+                <li>Item 5</li>
+            </ol>
+        </div>
+        <h3 class="heading heading-avatar">Unordered list</h3>
+        <p class="description description-avatar">You can use <span class="colored-text"> ul </span> tag for
+            unordered list as shown below. </p>
+        <iframe class="code-snippet-display"
+            src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=823&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=false&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%2520%2520%2520%2520%2520%2520%252F%252F%2520Unordered%2520List%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cul%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25201%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25202%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25203%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25204%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EItem%25205%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Ful%253E"
+            sandbox="allow-scripts allow-same-origin">
+        </iframe>
+        <div class="badge_container-main flex-center">
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                <li>Item 4</li>
+                <li>Item 5</li>
+            </ul>
+        </div>
     </div>
     </div>
 </body>