CreateX
UI Kit

Inline code

  Show code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

User input

  Show code

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Code block

  Show code

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Code block scrollable

  Show code

<div class="team-card-style-1 mx-auto">
    <div class="team-card-inner">
      <div class="team-thumb">
        <img src="path-to-image.jpg" alt="Team Member Picture"/>
      </div>
      <div class="team-social-bar text-center">
        <a class="social-btn sb-style-4 sb-twitter" href="#"><i class="socicon-twitter"></i></a>
        <a class="social-btn sb-style-4 sb-github" href="#"><i class="socicon-github"></i></a>
        <a class="social-btn sb-style-4 sb-stackoverflow" href="#"><i class="socicon-stackoverflow"></i></a>
        <a class="social-btn sb-style-4 sb-skype" href="#"><i class="socicon-skype"></i></a>
      </div>
      <a class="team-contact-link" href="tel:+19871625346">
        <i class="fe-icon-phone"></i>
        &nbsp;+1 (987) 162 53 46
      </a>
      <a class="team-contact-link" href="mailto:info@example.com">
        <i class="fe-icon-mail"></i>
        &nbsp;info@example.com
      </a>
    </div>
    <span class="team-position">Lead Programmer</span>
    <h4 class="team-name">William Smith</h4>
  </div>

  

Code block tabs

  Show code

<div class="team-card-style-1 mx-auto">
    <div class="team-card-inner">
      <div class="team-thumb">
        <img src="path-to-image.jpg" alt="Team Member Picture"/>
      </div>
      <div class="team-social-bar text-center">
        <a class="social-btn sb-style-4 sb-twitter" href="#"><i class="socicon-twitter"></i></a>
        <a class="social-btn sb-style-4 sb-github" href="#"><i class="socicon-github"></i></a>
        <a class="social-btn sb-style-4 sb-stackoverflow" href="#"><i class="socicon-stackoverflow"></i></a>
        <a class="social-btn sb-style-4 sb-skype" href="#"><i class="socicon-skype"></i></a>
      </div>
      <a class="team-contact-link" href="tel:+19871625346">
        <i class="fe-icon-phone"></i>
        &nbsp;+1 (987) 162 53 46
      </a>
      <a class="team-contact-link" href="mailto:info@example.com">
        <i class="fe-icon-mail"></i>
        &nbsp;info@example.com
      </a>
    </div>
    <span class="team-position">Lead Programmer</span>
    <h4 class="team-name">William Smith</h4>
  </div>
.team-card-style-1.mx-auto
    .team-card-inner
      .team-thumb
        +image("path-to-image.jpg", "Team Member Picture")
      .team-social-bar.text-center
        a(href="#").social-btn.sb-style-4.sb-twitter
          i.socicon-twitter
        a(href="#").social-btn.sb-style-4.sb-github
          i.socicon-github
        a(href="#").social-btn.sb-style-4.sb-stackoverflow
          i.socicon-stackoverflow
        a(href="#").social-btn.sb-style-4.sb-skype
          i.socicon-skype
      a(href="tel:+19871625346").team-contact-link
        i.fe-icon-phone
        | &nbsp;+1 (987) 162 53 46
      a(href="mailto:info@example.com").team-contact-link
        i.fe-icon-mail
        | &nbsp;info@example.com
    span.team-position Lead Programmer
    h4.team-name William Smith