<div class="margin-m1 padding-p1">
              <p class="font-medium">
                Avatar can be used to show user's profile picture on profile
                information page, on navigation bar, in blogs grid items.
              </p>
  
              <p class="font-medium">
                Avatar is available in 4 different sizes. You can use image in
                Avatar. You need to include class avatar and for size add class
                according to size avatar-xl, avatar-lg, avatar-md, avatar-sm (e.g.
                class="round-img avatar-lg")
              </p>
            </div>
          <div class="margin-m1 container-flex flex-center">
              <code>
                <iframe
                  src="https://carbon.now.sh/embed?bg=rgba%28231%2C229%2C229%2C1%29&t=one-light&wt=none&l=auto&width=748.5&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%253Cfigure%253E%2520%253Cimg%2520class%253D%2522round-img%2520avatar-xl%2522%2520src%253D%2522.....%2522%2520%252F%253E%2520%2520%253C%252Ffigure%253E%250A%253Cfigure%253E%2520%253Cimg%2520class%253D%2522round-img%2520avatar-lg%2522%2520src%253D%2522.....%2522%252F%253E%2520%2520%2520%253C%252Ffigure%253E%250A%253Cfigure%253E%2520%253Cimg%2520class%253D%2522round-img%2520avatar-md%2522%2520src%253D%2522.....%2522%252F%253E%2520%2520%253C%252Ffigure%253E%250A%253Cfigure%253E%2520%253Cimg%2520class%253D%2522round-img%2520avatar-sm%2522%2520src%253D%2522.....%2522%252F%253E%2520%253C%252Ffigure%253E"
                  style="
                    width: 749px;
                    height: 137px;
                    border: 0;
                    transform: scale(1);
                    overflow: hidden;
                  "
                  sandbox="allow-scripts allow-same-origin"
                >
                </iframe>
              </code>
          </div>