Code

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