Code Panel
Code panels are used to create a focused view of a block of code, for example to display logs.
Class | Type | |
---|---|---|
code-panel
|
Code Panel | A class representing a code panel |
function = {
firstName: “hello”
}
<section class="code-panel u-min-width-100-percent theme-dark">
<header class="code-panel-header">
<div class="u-flex u-gap-16 u-margin-inline-start-auto">
<button class="button is-text">
<span class="icon-external-link" aria-hidden="true"></span>
<span class="text">Raw data</span>
</button>
<button class="button is-secondary is-disabled">
<span class="icon-arrow-narrow-up" aria-hidden="true"></span>
<span class="text">Scroll to top</span>
</button>
</div>
</header>
<code class="code-panel-content grid-code">
<div class="grid-code-line-number"></div>
<pre>function = {</pre>
<div class="grid-code-line-number"></div>
<pre> firstName: “hello”</pre>
<div class="grid-code-line-number"></div>
<pre>}</pre>
</code>
</section>
Code Grid
A grid of code lines, used inside the code panel.
function = {
firstName: “hello”
}
<code class="grid-code">
<div class="grid-code-line-number"></div>
<pre>function = {</pre>
<div class="grid-code-line-number"></div>
<pre> firstName: “hello”</pre>
<div class="grid-code-line-number"></div>
<pre>}</pre>
</code>