templates/typography/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Typography</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Typograpy</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-xl-6 col-md-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Default Heading Text</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="text-wrap">
  28.                                                 <p>Examples using standard <code>h1</code> to <code>h6</code> html tags</p>
  29.                                                 <div class="example">
  30.                                                     <h1>h1. Heading</h1>
  31.                                                     <h2>h2. Heading</h2>
  32.                                                     <h3>h3. Heading</h3>
  33.                                                     <h4>h4. Heading</h4>
  34.                                                     <h5>h5. Heading</h5>
  35.                                                     <h6>h6. Heading</h6>
  36.                                                 </div>
  37.                                             </div>
  38.                                         </div>
  39.                                     </div>
  40.                                 </div><!-- COL-END -->
  41.                                 <div class="col-xl-6 col-md-12">
  42.                                     <div class="card">
  43.                                         <div class="card-header border-bottom">
  44.                                             <h3 class="card-title">Heading with color Text</h3>
  45.                                         </div>
  46.                                         <div class="card-body">
  47.                                             <div class="text-wrap">
  48.                                                 <p>Examples using standard <code>h1</code> to <code>h6</code> html tags</p>
  49.                                                 <div class="example">
  50.                                                     <h1 class="text-primary">h1. Heading</h1>
  51.                                                     <h2  class="text-secondary">h2. Heading</h2>
  52.                                                     <h3  class="text-success">h3. Heading</h3>
  53.                                                     <h4  class="text-danger">h4. Heading</h4>
  54.                                                     <h5  class="text-info">h5. Heading</h5>
  55.                                                     <h6  class="text-warning">h6. Heading</h6>
  56.                                                 </div>
  57.                                             </div>
  58.                                         </div>
  59.                                     </div>
  60.                                 </div><!-- COL-END -->
  61.                             </div>
  62.                             <!-- ROW-1 CLOSED -->
  64.                             <!-- ROW-2 OPEN -->
  65.                             <div class="row">
  66.                                 <div class="col-xl-12">
  67.                                     <div class="card custom-card">
  68.                                         <div class="card-header border-bottom">
  69.                                             <h3 class="card-title">Display headings</h3>
  70.                                         </div>
  71.                                         <div class="card-body">
  72.                                             <p class="text-muted card-sub-title">you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.</p>
  73.                                             <div class="text-wrap">
  74.                                                 <div class="example">
  75.                                                     <h1 class="display-1">Display 1</h1>
  76.                                                     <h1 class="display-2">Display 2</h1>
  77.                                                     <h1 class="display-3">Display 3</h1>
  78.                                                     <h1 class="display-4">Display 4</h1>
  79.                                                     <h1 class="display-5">Display 5</h1>
  80.                                                     <h1 class="display-6">Display 6</h1>
  81.                                                 </div>
  82.                                             </div>
  83.                                         </div>
  84.                                     </div>
  85.                                 </div>
  86.                             </div>
  87.                             <!-- ROW-2 CLOSED -->
  89.                             <!-- ROW-3 OPEN -->
  90.                             <div class="row">
  91.                                 <div class="col-xl-12 col-md-12">
  92.                                     <div class="card">
  93.                                         <div class="card-header border-bottom">
  94.                                             <h3 class="card-title">Inline text elements</h3>
  95.                                         </div>
  96.                                         <div class="card-body">
  97.                                             <p class="text-muted">Styling for common inline HTML5 elements.</p>
  98.                                             <div class="text-wrap">
  99.                                                 <div class="example">
  100.                                                     <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  101.                                                     <p><del>This line of text is meant to be treated as deleted text.</del></p>
  102.                                                     <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  103.                                                     <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  104.                                                     <p><u>This line of text will render as underlined</u></p>
  105.                                                     <p><small>This line of text is meant to be treated as fine print.</small></p>
  106.                                                     <p><strong>This line rendered as bold text.</strong></p>
  107.                                                     <p class="mb-0"><em>This line rendered as italicized text.</em></p>
  108.                                                 </div>
  109.                                             </div>
  110.                                         </div>
  111.                                     </div>
  112.                                 </div><!-- COL-END -->
  114.                                 <div class="col-xl-12 col-md-12">
  115.                                     <div class="card">
  116.                                         <div class="card-header border-bottom">
  117.                                             <h3 class="card-title">Font Size</h3>
  118.                                         </div>
  119.                                         <div class="card-body">
  120.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  121.                                             <div class="table-responsive">
  122.                                                 <table class="table table-bordered text-nowrap">
  123.                                                     <tbody>
  124.                                                         <tr>
  125.                                                             <td class="wp-15"><b>Classes</b></td>
  126.                                                             <td><code>.text-[value]</code></td>
  127.                                                         </tr>
  128.                                                         <tr>
  129.                                                             <td><b>Values</b></td>
  130.                                                             <td>8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20 | 22 | 24 | ... | 140</td>
  131.                                                         </tr>
  132.                                                     </tbody>
  133.                                                 </table>
  134.                                             </div>
  135.                                             <div class="table-responsive">
  136.                                                 <table class="table table-bordered text-nowrap">
  137.                                                     <tbody>
  138.                                                         <tr>
  139.                                                             <td class="wp-15"><b>Classes</b></td>
  140.                                                             <td><code>.text-[viewport]-[value]</code></td>
  141.                                                         </tr>
  142.                                                         <tr>
  143.                                                             <td><b>Viewports</b></td>
  144.                                                             <td>xs | sm | md | lg | xl</td>
  145.                                                         </tr>
  146.                                                         <tr>
  147.                                                             <td><b>Sizes</b></td>
  148.                                                             <td>8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20 | 22 | 24 | ... | 140 (step of 2)</td>
  149.                                                         </tr>
  150.                                                     </tbody>
  151.                                                 </table>
  152.                                             </div>
  153.                                         </div>
  154.                                     </div>
  155.                                 </div><!-- COL-END -->
  157.                                 <div class="col-xl-12 col-md-12">
  158.                                     <div class="card">
  159.                                         <div class="card-header border-bottom">
  160.                                             <h3 class="card-title">Font Weight</h3>
  161.                                         </div>
  162.                                         <div class="card-body">
  163.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  164.                                             <div class="table-responsive">
  165.                                                 <table class="table table-bordered text-nowrap">
  166.                                                     <tbody>
  167.                                                         <tr>
  168.                                                             <td class="wp-15"><b>Classes</b></td>
  169.                                                             <td><code>.text-[weight]</code></td>
  170.                                                         </tr>
  171.                                                         <tr>
  172.                                                             <td><b>Weight</b></td>
  173.                                                             <td>bold | semibold | medium | normal | light | thin | xthin</td>
  174.                                                         </tr>
  175.                                                     </tbody>
  176.                                                 </table>
  177.                                             </div>
  178.                                         </div>
  179.                                     </div>
  180.                                 </div><!-- COL-END -->
  182.                                 <div class="col-xl-12 col-md-12">
  183.                                     <div class="card">
  184.                                         <div class="card-header border-bottom">
  185.                                             <h3 class="card-title">Font Color</h3>
  186.                                         </div>
  187.                                         <div class="card-body">
  188.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  189.                                             <div class="table-responsive">
  190.                                                 <table class="table table-bordered text-nowrap">
  191.                                                     <tbody>
  192.                                                         <tr>
  193.                                                             <td class="wp-15"><b>Classes</b></td>
  194.                                                             <td><code>.text-[color]</code></td>
  195.                                                         </tr>
  196.                                                         <tr>
  197.                                                             <td><b>Color</b></td>
  198.                                                             <td>primary | secondary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white</td>
  199.                                                         </tr>
  200.                                                     </tbody>
  201.                                                 </table>
  202.                                             </div>
  203.                                             <div class="table-responsive">
  204.                                                 <table class="table table-bordered text-nowrap">
  205.                                                     <tbody>
  206.                                                         <tr>
  207.                                                             <td class="wp-15"><b>Classes</b></td>
  208.                                                             <td><code>.text-[color]-[mode]</code></td>
  209.                                                         </tr>
  210.                                                         <tr>
  211.                                                             <td><b>Mode</b></td>
  212.                                                             <td>light | lighter | lightest | dark | darker | darkest</td>
  213.                                                         </tr>
  214.                                                     </tbody>
  215.                                                 </table>
  216.                                             </div>
  217.                                         </div>
  218.                                     </div>
  219.                                 </div><!-- COL-END -->
  221.                                 <div class="col-xl-12 col-md-12">
  222.                                     <div class="card">
  223.                                         <div class="card-header border-bottom">
  224.                                             <h3 class="card-title">Font Spacing</h3>
  225.                                         </div>
  226.                                         <div class="card-body">
  227.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  228.                                             <div class="table-responsive">
  229.                                                 <table class="table table-bordered text-nowrap">
  230.                                                     <tbody>
  231.                                                         <tr>
  232.                                                             <td class="wp-15"><b>Classes</b></td>
  233.                                                             <td><code>.text-spacing-[value]</code></td>
  234.                                                         </tr>
  235.                                                         <tr>
  236.                                                             <td><b>Values</b></td>
  237.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8</td>
  238.                                                         </tr>
  239.                                                     </tbody>
  240.                                                 </table>
  241.                                             </div>
  242.                                             <div class="table-responsive">
  243.                                                 <table class="table table-bordered text-nowrap">
  244.                                                     <tbody>
  245.                                                         <tr>
  246.                                                             <td class="wp-15"><b>Classes</b></td>
  247.                                                             <td><code>.text-spacing--[value]</code></td>
  248.                                                         </tr>
  249.                                                         <tr>
  250.                                                             <td><b>Values</b></td>
  251.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 ( negative spacing result )</td>
  252.                                                         </tr>
  253.                                                     </tbody>
  254.                                                 </table>
  255.                                             </div>
  256.                                         </div>
  257.                                     </div>
  258.                                 </div><!-- COL-END -->
  260.                                 <div class="col-xl-12 col-md-12">
  261.                                     <div class="card">
  262.                                         <div class="card-header border-bottom">
  263.                                             <h3 class="card-title">Line Height</h3>
  264.                                         </div>
  265.                                         <div class="card-body">
  266.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  267.                                             <div class="table-responsive">
  268.                                                 <table class="table table-bordered">
  269.                                                     <tbody>
  270.                                                         <tr>
  271.                                                             <td class="wp-15"><b>Classes</b></td>
  272.                                                             <td><code>.line-height-[value]</code></td>
  273.                                                         </tr>
  274.                                                         <tr>
  275.                                                             <td><b>Values</b></td>
  276.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15</td>
  277.                                                         </tr>
  278.                                                     </tbody>
  279.                                                 </table>
  280.                                             </div>
  281.                                             <div class="table-responsive">
  282.                                                 <table class="table table-bordered">
  283.                                                     <tbody>
  284.                                                         <tr>
  285.                                                             <td class="wp-15"><b>Classes</b></td>
  286.                                                             <td><code>.line-height-[viewport]-[value]</code></td>
  287.                                                         </tr>
  288.                                                         <tr>
  289.                                                             <td><b>View Port</b></td>
  290.                                                             <td>xs | sm | md | lg | xl</td>
  291.                                                         </tr>
  292.                                                         <tr>
  293.                                                             <td><b>Values</b></td>
  294.                                                             <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15</td>
  295.                                                         </tr>
  296.                                                     </tbody>
  297.                                                 </table>
  298.                                             </div>
  299.                                         </div>
  300.                                     </div>
  301.                                 </div><!-- COL-END -->
  303.                                 <div class="col-xl-12 col-md-12">
  304.                                     <div class="card">
  305.                                         <div class="card-header border-bottom">
  306.                                             <h3 class="card-title">Text Alignment</h3>
  307.                                         </div>
  308.                                         <div class="card-body">
  309.                                             <p class="text-muted">It is Very Easy to Customize and it uses in website apllication.</p>
  310.                                             <div class="table-responsive">
  311.                                                 <table class="table table-bordered">
  312.                                                     <tbody>
  313.                                                         <tr>
  314.                                                             <td class="wp-15"><b>Classes</b></td>
  315.                                                             <td><code>.text-[position]</code></td>
  316.                                                         </tr>
  317.                                                         <tr>
  318.                                                             <td><b>Position</b></td>
  319.                                                             <td>start | center | end</td>
  320.                                                         </tr>
  321.                                                     </tbody>
  322.                                                 </table>
  323.                                             </div>
  324.                                         </div>
  325.                                     </div>
  326.                                 </div><!-- COL-END -->
  327.                                 <span id="timeOut"></span>
  328.                             </div>
  329.                             <!-- ROW-3 CLOSED -->
  330. {% endblock %}