Components - Output Containers

Output boxes to display output results

Output Containers

Simple output Containers

Just a simple container with a box. With required margins and padding added by default.

Implementation Code and the output

<body class="neon-ui">
  <div class="output-container">
    <i class="ph-bold ph-info"></i>
        Sample output content
  </div>
</body>

Copy

Sample output content

Implementation Code and the output

If a list is to be shown in an output container, following is the implementation code and the sample output.

<body class="neon-ui">
  <div class="output-container">
    <ol class="list-nums">
      <li>list-topics: Open the terminal</li>
      <li>list-topics: Enter the following command</li>
      <li>list-topics: Close the terminal</li>
      <li>list-topics: Close the system</li>
    </ol>
  </div>
</body>

Copy

list-topics: Open the terminal
list-topics: Enter the following command
list-topics: Close the terminal
list-topics: Close the system

Components - Info Boxes

Components - Code Boxes