templates/ui-typography.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Typography'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Typography'}) }}
  28.                         <div class="row">
  29.                             <div class="col-xl-6">
  30.                                 <div class="card">
  31.                                     <div class="card-body">
  32.                                         <div class="d-flex">
  33.                                             <div class="flex-shrink-0 ms-3 me-4">
  34.                                                 <h1 class="display-4 mb-0">A</h1>
  35.                                             </div>
  36.                                             <div class="flex-grow-1 align-self-center">
  37.                                                 <p class="text-muted mb-2">Font Family</p>
  38.                                                 <h5 class="mb-0">" IBM Plex Sans", sans-serif</h5>
  39.                                             </div>
  40.                                         </div>
  41.                                     </div>
  42.                                 </div>
  43.                                 <!-- end card -->
  45.                                 <div class="card">
  46.                                     <div class="card-header">
  47.                                         <h4 class="card-title">Headings</h4>
  48.                                         <p class="card-title-desc">All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are
  49.                                             available.
  50.                                         </p>
  51.                                     </div><!-- end card header -->
  53.                                     <div class="card-body">
  54.                                         <h1 class="mb-3">h1. Bootstrap heading <small class="text-muted">2.1875rem (35px)</small></h1>
  56.                                         <h2 class="mb-3">h2. Bootstrap heading <small class="text-muted">1.75rem (28px)</small></h2>
  58.                                         <h3 class="mb-3">h3. Bootstrap heading <small class="text-muted">1.53125rem (24.5px)</small></h3>
  60.                                         <h4 class="mb-3">h4. Bootstrap heading <small class="text-muted">1.3125rem (21px)</small></h4>
  62.                                         <h5 class="mb-3">h5. Bootstrap heading <small class="text-muted">1.09375rem (17.5px)</small></h5>
  64.                                         <h6>h6. Bootstrap heading <small class="text-muted">0.875rem (14px)</small></h6>
  65.                                     </div><!-- end card-body -->
  66.                                 </div><!-- end card -->
  67.                             
  68.                                 <div class="card">
  69.                                     <div class="card-body">
  70.                                         <div class="row">
  71.                                             <div class="col-sm-6">
  72.                                                 <div class="d-flex align-items-center">
  73.                                                     <div class="flex-shrink-0 me-4">
  74.                                                         <h1 class="fw-medium display-4 mb-0">Aa</h1>
  75.                                                     </div>
  76.                                                     <div class="flex-grow-1">
  77.                                                         <p class="text-muted mb-2">Font Weight</p>
  78.                                                         <h4 class="mb-0">500</h4>
  79.                                                     </div>
  80.                                                 </div>
  81.                                             </div><!-- end col -->
  83.                                             <div class="col-sm-6">
  84.                                                 <div class="d-flex align-items-center mt-4 mt-sm-0">
  85.                                                     <div class="flex-shrink-0 me-4">
  86.                                                         <h1 class="fw-semibold display-4 mb-0">Aa</h1>
  87.                                                     </div>
  88.                                                     <div class="flex-grow-1">
  89.                                                         <p class="text-muted mb-2">Font Weight</p>
  90.                                                         <h4 class="mb-0">600</h4>
  91.                                                     </div>
  92.                                                 </div>
  93.                                             </div><!-- end col -->
  94.                                         </div><!-- end row -->
  95.                                     </div><!-- end card-body -->
  96.                                 </div><!-- end card -->
  97.                             </div><!-- end col -->
  98.         
  99.                             <div class="col-xl-6">
  100.                                 <div class="card">
  101.                                     <div class="card-header">
  102.                                         <h4 class="card-title">Display headings</h4>
  103.                                         <p class="card-title-desc">Traditional heading elements are designed to work best in the meat of your page content. </p>
  104.                                     </div><!-- end card header -->
  106.                                     <div class="card-body">
  107.                                         <h1 class="display-1">Display 1</h1>
  108.                                         <h1 class="display-2">Display 2</h1>
  109.                                         <h1 class="display-3">Display 3</h1>
  110.                                         <h1 class="display-4">Display 4</h1>
  111.                                         <h1 class="display-5">Display 5</h1>
  112.                                         <h1 class="display-6 mb-0">Display 6</h1>
  113.                                     </div><!-- end card-body -->
  114.                                 </div><!-- end card -->
  115.                             </div><!-- end col -->
  116.                         </div><!-- end row -->
  118.                         <div class="row">
  119.                             <div class="col-xl-6">
  120.                                 <div class="card">
  121.                                     <div class="card-header">
  122.                                         <h4 class="card-title">Inline text elements</h4>
  123.                                         <p class="card-title-desc">Styling for common inline HTML5 elements.</p>
  124.                                     </div><!-- end card header -->
  126.                                     <div class="card-body">
  127.                                         <p class="lead">
  128.                                             Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  129.                                         </p>
  130.                                         <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  131.                                         <p><del>This line of text is meant to be treated as deleted text.</del></p>
  132.                                         <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  133.                                         <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  134.                                         <p><u>This line of text will render as underlined</u></p>
  135.                                         <p><small>This line of text is meant to be treated as fine print.</small></p>
  136.                                         <p><strong>This line rendered as bold text.</strong></p>
  137.                                         <p class="mb-0"><em>This line rendered as italicized text.</em></p>
  138.                                     </div><!-- end card-body -->
  139.                                 </div><!-- end card -->
  140.                             </div><!-- end col -->
  142.                             <div class="col-xl-6">
  143.                                 <div class="card">
  144.                                     <div class="card-header">
  145.                                         <h4 class="card-title">Unstyled List</h4>
  146.                                         <p class="card-title-desc">Remove the default <code
  147.                                                 class="highlighter-rouge">list-style</code> and left margin on list
  148.                                             items (immediate children only). <strong>This only applies to immediate
  149.                                                 children list items</strong>, meaning you will need to add the class
  150.                                             for any nested lists as well.</p>
  151.                                     </div><!-- end card header -->
  153.                                     <div class="card-body">
  154.                                         <ul class="list-unstyled mb-0">
  155.                                             <li>Integer molestie lorem at massa</li>
  156.                                             <li>Nulla volutpat aliquam velit
  157.                                                 <ul>
  158.                                                     <li>Phasellus iaculis neque</li>
  159.                                                     <li>Purus sodales ultricies</li>
  160.                                                     <li>Vestibulum laoreet porttitor sem</li>
  161.                                                 </ul>
  162.                                             </li>
  163.                                             <li>Faucibus porta lacus fringilla vel</li>
  164.                                         </ul>
  165.                                     </div><!-- end card-body -->
  166.                                 </div><!-- end card -->                        
  168.                                 <div class="card">
  169.                                     <div class="card-header">
  170.                                         <h4 class="card-title">Inline List</h4>
  171.                                         <p class="card-title-desc">Remove a list’s bullets and apply some
  172.                                             light <code class="highlighter-rouge">margin</code> with a combination
  173.                                             of two classes, <code class="highlighter-rouge">.list-inline</code> and
  174.                                             <code class="highlighter-rouge">.list-inline-item</code>.</p>
  175.                                     </div><!-- end card header -->
  177.                                     <div class="card-body">
  178.                                         <ul class="list-inline mb-0">
  179.                                             <li class="list-inline-item">Lorem ipsum</li>
  180.                                             <li class="list-inline-item">Phasellus iaculis</li>
  181.                                             <li class="list-inline-item">Nulla volutpat</li>
  182.                                         </ul>
  183.         
  184.                                     </div><!-- end card-body -->
  185.                                 </div><!-- end card -->        
  186.                             </div> <!-- end col -->
  187.                         </div> <!-- end row -->
  189.                         <div class="row">
  190.                             <div class="col-lg-12">
  191.                                 <div class="card">
  192.                                     <div class="card-header">
  193.                                         <h4 class="card-title">Blockquotes</h4>
  194.                                         <p class="card-title-desc">For quoting blocks of content from
  195.                                             another source within your document. Wrap 
  196.                                             <code class="highlighter-rouge">&lt;blockquote class="blockquote"&gt;</code>
  197.                                             around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
  198.                                         </p>
  199.                                     </div><!-- end card header -->
  201.                                     <div class="card-body">
  202.                                         <div class="row">
  203.                                             <div class="col-xl-6">
  204.                                                 <div>
  205.                                                     <blockquote class="blockquote font-size-16 mb-0">
  206.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  207.                                                         <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
  208.                                                         </footer>
  209.                                                     </blockquote>
  210.                                                 </div>
  211.                                             </div>
  212.                                             <div class="col-xl-6">
  213.                                                 <div class="mt-4 mt-lg-0">
  214.                                                     <blockquote class="blockquote  blockquote-reverse font-size-16 mb-0">
  215.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  216.                                                         <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
  217.                                                         </footer>
  218.                                                     </blockquote>
  219.                                                 </div>
  220.                                             </div>
  221.                                         </div>
  222.                                     
  223.                                     </div><!-- end card-body -->
  224.                                 </div><!-- end card -->
  225.                             </div><!-- end col -->
  226.                         </div><!-- end row -->
  228.                         <div class="row">
  229.                             <div class="col-12">
  230.         
  231.                                 <div class="card">
  232.                                     <div class="card-header">
  233.                                         <h4 class="card-title">Description list alignment</h4>
  234.                                         <p class="card-title-desc">Align terms and descriptions
  235.                                             horizontally by using our grid system’s predefined classes (or semantic
  236.                                             mixins). For longer terms, you can optionally add a <code
  237.                                                     class="highlighter-rouge">.text-truncate</code> class to
  238.                                             truncate the text with an ellipsis.</p>
  239.                                     </div><!-- end card header -->
  241.                                     <div class="card-body">
  242.                                         <dl class="row mb-0">
  243.                                             <dt class="col-sm-3">Description lists</dt>
  244.                                             <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
  245.         
  246.                                             <dt class="col-sm-3">Euismod</dt>
  247.                                             <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  248.                                             <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
  249.         
  250.                                             <dt class="col-sm-3">Malesuada porta</dt>
  251.                                             <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
  252.         
  253.                                             <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  254.                                             <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
  255.         
  256.                                             <dt class="col-sm-3">Nesting</dt>
  257.                                             <dd class="col-sm-9 mb-0">
  258.                                                 <dl class="row mb-0">
  259.                                                     <dt class="col-sm-4">Nested definition list</dt>
  260.                                                     <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
  261.                                                 </dl>
  262.                                             </dd>
  263.                                         </dl>
  265.                                     </div><!-- end card-body -->
  266.                                 </div><!-- end card -->
  267.                             </div><!-- end col -->
  268.                         </div><!-- end row -->
  270.                     </div>
  271.                     <!-- container-fluid -->
  272.                 </div>
  273.                 <!-- End Page-content -->
  275.                 
  276.                 {{ include('partials/footer.html.twig') }}
  277.             </div>
  278.             <!-- end main content-->
  280.         </div>
  281.         <!-- END layout-wrapper -->
  283.         {{ include('partials/right-sidebar.html.twig') }}
  285.         {{ include('partials/vendor-scripts.html.twig') }}
  287.         <script src="/js/app.js"></script>
  289.     </body>
  290. </html>