Components Sample

Documentation

General

Getting Started

Template

Template

Layout

Typography

Navigational

Breadcrumbs

Informational

Data

Input

Images

Header

Menubar

Footer

Footer

Components - code container

Components - Code Block

Code container with tabs with headings

Code Container boxes

Code Block: Multi tabs with headings

Code block container with multiple tabs with heading and details and default code highlight as well.

HTML codes to Entities

For HTML code, have the html tags converted to html entities. Java script and CSS codes could be written as is.

Javascript, css and other codes can be as is. No conversion needed.

Convert html codes to html entities

< (less than sign) becomes < or <
> (greater than sign) becomes > or >
& (ampersand sign) becomes & or &
" (double quote sign) becomes " or "
' (apostrophe/single quote sign) becomes ' or '

Code Block - Single Tab

Sample Code for one Tab

<div class="code-block-group">
  <div class="code-block-tab">
    <div class="tab-list-group">
      <div id="tab1" class="tab-list tab1 active">Sample Tab heading Goes here</div>
    </div>
    <div class="tab-icons-group">
      <i class="ph-bold ph-copy tips-copy-icon"></i>
      <div class="tips-text-flower-top">Copy</div>
    </div>
  </div>
  <div class="code-block-toparch">
    <div class="code-block">
      <pre id="tab1-detail" class="tab-detail tab1-detail active"><code>
            Sample Code Goes Here
  </code></pre>
    </div>
  </div>
</div>

Copy

Implementation Code and the output

<div class="code-block-group">
  <div class="code-block-tab">
    <div class="tab-list-group">
      <div id="tab1" class="tab-list tab1 active">Javascript</div>
    </div>
    <div class="tab-icons-group">
      <i class="ph-bold ph-copy tips-copy-icon"></i>
      <div class="tips-text-flower-top">Copy</div>
    </div>
  </div>
  <div class="code-block-toparch">
    <div class="code-block">
      <pre id="tab1-detail" class="tab-detail tab3-detail active"><code>
            async function copyToClipboard(clipboardText) {
        try {
            await navigator.clipboard.writeText(clipboardText);
            if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
        } catch (error) {
            if (test) console.log("Copy to Clipboard Error ", error);
        }
      } 
  </code></pre>
    </div>
  </div>
</div>

Copy

Javascript
Copy

                async function copyToClipboard(clipboardText) {
  try {
      await navigator.clipboard.writeText(clipboardText);
      if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
  } catch (error) {
      if (test) console.log("Copy to Clipboard Error ", error);
  }
}
              

Code Block - Multiple Tabs

Code Changes to modify number of tabs - Tab Heading

Under the class tab-list-group , in the div element having the class tab-list , add tabn where n is the number of the current tab
In the div element with the class, tab-list add the id tabn where n is the number of the current tab
In the div element with the class, tab-list add the class active for the tab to be displayed by default
In the same div element with the class, tab-list add the InnerText with the tab title name ( HTML like in the below example)

<div id="tab1" class="tab-list tab1 active">HTML</div>

Copy

Under the hierarchy of the div element with the class, tab-list-group add another with the same rules as mentioned above to add another tab. See below.
In this example the tab2 is not active by default, so active class is "not required"

<div id="tab2" class="tab-list tab2">CSS</div>

Copy

Code Changes to modify number of tabs - Tab Detail

Under the class code-block , in the pre element having the class tab-detail , add the class tabn-detail where n is the number of the tab corresponding to the tab heading
In the pre element having the class tab-detail , add the id tabn-detail where n is the number of the tab corresponding to the tab heading
In the div element with the class, tab-list add the class active for the tab to be displayed by default corresponding to the active tab title

<pre id="tab1-detail" class="tab-detail tab1-detail active">

Copy

In the code element add the "code" required to be displayed.

<code>
    &lt;div class=&quot;m-l-1&quot;&gt;
        &lt;div class=&quot;code-box m-l-1&quot;&gt;
          &lt;!-- &lt;pre class=&quot;code-html&quot;&gt; --&gt;
          &lt;code class=&quot;m-l-1&quot;&gt;Javscript . This is a test code &lt;/code&gt;
          &lt;!-- &lt;/pre&gt; --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code>

Copy

Add another pre and code blocks with the another tab details' "code"
Follow the above tab detail's rules to add the code pre and code
In this example the tab2 is not active by default, so active class is "not required"

<pre id="tab2-detail" class="tab-detail tab2-detail">
    </code>
        .thulasi {
            font-family: "Inter",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            "Roboto",
            "Oxygen",
            "Ubuntu",
            "Cantarell",
            "Fira Sans",
            "Droid Sans",
            "Helvetica Neue",
            sans-serif;
        }
    </code>
</pre>

Copy

Implementation Code and the output

<div class="code-block-group">

  <div class="code-block-tab">
    <div class="tab-list-group">
      <div id="tab1" class="tab-list tab1 active">HTML</div>
      <div id="tab2" class="tab-list tab2  ">CSS</div>
      <div id="tab3" class="tab-list tab3 ">Javascript</div>
    </div>
    <div class="tab-icons-group">
      <i class="ph-bold ph-copy tips-copy-icon"></i>
      <div class="tips-text-flower-top">Copy</div>
    </div>
  </div>
  
  <div class="code-block-toparch">
    <div class="code-block">
      <pre id="tab1-detail" class="tab-detail tab1-detail active">
        <code>
              &lt;div class=&quot;m-l-1&quot;&gt;
                &lt;div class=&quot;code-box m-l-1&quot;&gt;
                  &lt;!-- &lt;pre class=&quot;code-html&quot;&gt; --&gt;
                    &lt;code class=&quot;m-l-1&quot;&gt;Javscript . This is a test code &lt;/code&gt;
                  &lt;!-- &lt;/pre&gt; --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
        </code>
      </pre>
      
      <pre id="tab2-detail" class="tab-detail tab2-detail">
        <code>
            .thulasi {
              font-family: "Inter",
              -apple-system,
              BlinkMacSystemFont,
              "Segoe UI",
              "Roboto",
              "Oxygen",
              "Ubuntu",
              "Cantarell",
              "Fira Sans",
              "Droid Sans",
              "Helvetica Neue",
              sans-serif;
            }
        </code>
      </pre>
            
      <pre id="tab3-detail" class="tab-detail tab3-detail">
        <code>
            async function copyToClipboard(clipboardText) {
              try {
                  await navigator.clipboard.writeText(clipboardText);
                  if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
              } catch (error) {
                  if (test) console.log("Copy to Clipboard Error ", error);
              }
            }
        </code>
      </pre>
    </div>
  </div>

</div>

Copy

HTML
CSS
Javascript
Copy

                <div class="m-l-1">
  <div class="code-box m-l-1">
    <!-- <pre class="code-html"> -->
      <code class="m-l-1">Javscript . This is a test code </code>
    <!-- </pre> -->
  </div>
</div>
                .thulasi {
    font-family: "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
}
                async function copyToClipboard(clipboardText) {
  try {
      await navigator.clipboard.writeText(clipboardText);
      if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
  } catch (error) {
      if (test) console.log("Copy to Clipboard Error ", error);
  }
}

              

Components - Code (Link) Box

Info Components - Cards