templates/ui-cards.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: 'Cards'}) }}
  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: 'Cards'}) }}
  28.                         <div class="row">
  29.                             <div class="col-md-6 col-xl-3">
  31.                                 <!-- Simple card -->
  32.                                 <div class="card">
  33.                                     <img class="card-img-top img-fluid" src="/images/small/img-1.jpg" alt="Card image cap">
  34.                                     <div class="card-body">
  35.                                         <h4 class="card-title">Card title</h4>
  36.                                         <p class="card-text">Some quick example text to build on the card title and make
  37.                                             up the bulk of the card's content.</p>
  38.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light">Button</a>
  39.                                     </div>
  40.                                 </div>
  41.         
  42.                             </div><!-- end col -->
  44.                             <div class="col-md-6 col-xl-3">
  46.                                 <div class="card">
  47.                                     <img class="card-img-top img-fluid" src="/images/small/img-2.jpg" alt="Card image cap">
  48.                                     <div class="card-body">
  49.                                         <h4 class="card-title">Card title</h4>
  50.                                         <p class="card-text">Some quick example text to build on the card title and make
  51.                                             up the bulk of the card's content.</p>
  52.                                     </div>
  53.                                     <ul class="list-group list-group-flush">
  54.                                         <li class="list-group-item">Cras justo odio</li>
  55.                                         <li class="list-group-item">Dapibus ac facilisis in</li>
  56.                                     </ul>
  57.                                     <div class="card-body">
  58.                                         <a href="javascript: void(0);" class="card-link">Card link</a>
  59.                                         <a href="javascript: void(0);" class="card-link">Another link</a>
  60.                                     </div>
  61.                                 </div>
  63.                             </div><!-- end col -->
  65.                             <div class="col-md-6 col-xl-3">
  67.                                 <div class="card">
  68.                                     <img class="card-img-top img-fluid" src="/images/small/img-3.jpg" alt="Card image cap">
  69.                                     <div class="card-body">
  70.                                         <p class="card-text">Some quick example text to build on the card title and make
  71.                                             up the bulk of the card's content.</p>
  72.                                     </div>
  73.                                 </div>
  75.                             </div><!-- end col -->
  78.                             <div class="col-md-6 col-xl-3">
  80.                                 <div class="card">
  81.                                     <div class="card-body">
  82.                                         <h4 class="card-title">Card title</h4>
  83.                                         <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  84.                                     </div>
  85.                                     <img class="img-fluid" src="/images/small/img-4.jpg" alt="Card image cap">
  86.                                     <div class="card-body">
  87.                                         <p class="card-text">Some quick example text to build on the card title and make
  88.                                             up the bulk of the card's content.</p>
  89.                                         <a href="javascript: void(0);" class="card-link">Card link</a>
  90.                                         <a href="javascript: void(0);" class="card-link">Another link</a>
  91.                                     </div>
  92.                                 </div>
  93.         
  94.                             </div><!-- end col -->
  95.                         </div>
  96.                         <!-- end row -->
  97.         
  98.                         <div class="row">
  99.                             <div class="col-md-6">
  100.                                 <div class="card">
  101.                                     <div class="card-body">
  102.                                         <h3 class="card-title">Special title treatment</h3>
  103.                                         <p class="card-text">With supporting text below as a natural lead-in to additional
  104.                                             content.</p>
  105.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light w-100">Go somewhere</a>
  106.                                     </div>
  107.                                 </div>
  108.                             </div><!-- end col -->
  110.                             <div class="col-md-6">
  111.                                 <div class="card">
  112.                                     <div class="card-body">
  113.                                         <h3 class="card-title">Special title treatment</h3>
  114.                                         <p class="card-text">With supporting text below as a natural lead-in to additional
  115.                                             content.</p>
  116.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light w-100">Go somewhere</a>
  117.                                     </div>
  118.                                 </div>
  119.                             </div><!-- end col -->
  121.                         </div>
  122.                         <!-- end row -->
  123.         
  124.                         <div class="row">
  125.                             <div class="col-lg-4">
  126.                                 <div class="card">
  127.                                     <div class="card-body">
  128.                                         <h4 class="card-title">Special title treatment</h4>
  129.                                         <p class="card-text">With supporting text below as a natural lead-in to additional
  130.                                             content.</p>
  131.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light w-100">Go somewhere</a>
  132.                                     </div>
  133.                                 </div>
  134.                             </div><!-- end col -->
  135.         
  136.                             <div class="col-lg-4">
  137.                                 <div class="card">
  138.                                     <div class="card-body text-center">
  139.                                         <h4 class="card-title">Special title treatment</h4>
  140.                                         <p class="card-text">With supporting text below as a natural lead-in to additional
  141.                                             content.</p>
  142.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light w-100">Go somewhere</a>
  143.                                     </div>
  144.                                 </div>
  145.                             </div><!-- end col -->
  146.         
  147.                             <div class="col-lg-4">
  148.                                 <div class="card">
  149.                                     <div class="card-body text-end">
  150.                                         <h4 class="card-title">Special title treatment</h4>
  151.                                         <p class="card-text">With supporting text below as a natural lead-in to additional
  152.                                             content.</p>
  153.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light w-100">Go somewhere</a>
  154.                                     </div>
  155.                                 </div>
  156.                             </div><!-- end col -->
  158.                         </div>
  159.                         <!-- end row -->
  161.                         <div class="row">
  162.                             <div class="col-lg-4">
  163.                                 <div class="card">
  164.                                     <h5 class="card-header bg-transparent border-bottom text-uppercase">Featured</h5>
  165.                                     <div class="card-body">
  166.                                         <h4 class="card-title">Special title treatment</h4>
  167.                                         <p class="card-text">With supporting text below as a natural lead-in to
  168.                                             additional content.</p>
  169.                                         <a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
  170.                                     </div>
  171.                                 </div>
  172.                             </div><!-- end col -->
  173.         
  174.                             <div class="col-lg-4">
  175.                                 <div class="card">
  176.                                     <div class="card-header bg-transparent border-bottom">
  177.                                         Quote
  178.                                     </div>
  179.                                     <div class="card-body">
  180.                                         <blockquote class="card-blockquote mb-0">
  181.                                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
  182.                                                 erat a ante.</p>
  183.                                             <footer class="blockquote-footer mt-0 font-size-12">
  184.                                                 Someone famous in <cite title="Source Title">Source Title</cite>
  185.                                             </footer>
  186.                                         </blockquote>
  187.                                     </div>
  188.                                 </div>
  189.                             </div><!-- end col -->
  190.         
  191.                             <div class="col-lg-4">
  192.                                 <div class="card">
  193.                                     <div class="card-header bg-transparent border-bottom text-uppercase">
  194.                                         Featured
  195.                                     </div>
  196.                                     <div class="card-body">
  197.                                         <h4 class="card-title">Special title treatment</h4>
  198.                                         <p class="card-text">With supporting text below as a natural lead-in to
  199.                                             additional content.</p>
  200.                                         <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light">Go somewhere</a>
  201.                                     </div>
  202.                                     <div class="card-footer bg-transparent border-top text-muted">
  203.                                         2 days ago
  204.                                     </div>
  205.                                 </div>
  206.                             </div><!-- end col -->
  207.                         </div>
  208.                         <!-- end row -->
  209.         
  210.         
  211.                         <div class="row">
  212.                             <div class="col-lg-4">
  213.                                 <div class="card">
  214.                                     <img class="card-img-top img-fluid" src="/images/small/img-5.jpg" alt="Card image cap">
  215.                                     <div class="card-body">
  216.                                         <h4 class="card-title">Card title</h4>
  217.                                         <p class="card-text">This is a wider card with supporting text below as a
  218.                                             natural lead-in to additional content. This content is a little bit
  219.                                             longer.</p>
  220.                                         <p class="card-text">
  221.                                             <small class="text-muted">Last updated 3 mins ago</small>
  222.                                         </p>
  223.                                     </div>
  224.                                 </div>
  225.                             </div><!-- end col -->
  226.         
  227.                             <div class="col-lg-4">
  228.                                 <div class="card">
  229.                                     <div class="card-body">
  230.                                         <h4 class="card-title">Card title</h4>
  231.                                         <p class="card-text">This is a wider card with supporting text below as a
  232.                                             natural lead-in to additional content. This content is a little bit
  233.                                             longer.</p>
  234.                                         <p class="card-text">
  235.                                             <small class="text-muted">Last updated 3 mins ago</small>
  236.                                         </p>
  237.                                     </div>
  238.                                     <img class="card-img-bottom img-fluid" src="/images/small/img-7.jpg" alt="Card image cap">
  239.                                 </div>
  240.                             </div><!-- end col -->
  241.         
  242.                             <div class="col-lg-4">
  243.                                 <div class="card">
  244.                                     <img class="card-img img-fluid" src="/images/small/img-6.jpg" alt="Card image">
  245.                                     <div class="card-img-overlay">
  246.                                         <h4 class="card-title text-white">Card title</h4>
  247.                                         <p class="card-text text-white">This is a wider card with supporting text below as a
  248.                                             natural lead-in to additional content. This content is a little bit
  249.                                             longer.</p>
  250.                                         <p class="card-text">
  251.                                             <small class="text-white">Last updated 3 mins ago</small>
  252.                                         </p>
  253.                                     </div>
  254.                                 </div>
  255.                             </div><!-- end col -->
  256.         
  257.                         </div>
  258.                         <!-- end row -->
  260.                         <div class="row">
  261.                             <div class="col-lg-6">
  262.                                 <div class="card">
  263.                                     <div class="row g-0 align-items-center">
  264.                                         <div class="col-md-4">
  265.                                             <img class="card-img img-fluid" src="/images/small/img-2.jpg" alt="Card image">
  266.                                         </div>
  267.                                         <div class="col-md-8">
  268.                                             <div class="card-body">
  269.                                                 <h5 class="card-title">Card title</h5>
  270.                                                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
  271.                                                 <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  272.                                             </div>
  273.                                         </div>
  274.                                     </div>
  275.                                 </div>
  276.                             </div><!-- end col -->
  278.                             <div class="col-lg-6">
  279.                                 <div class="card">
  280.                                     <div class="row g-0 align-items-center">
  281.                                         <div class="col-md-8">
  282.                                             <div class="card-body">
  283.                                                 <h5 class="card-title">Card title</h5>
  284.                                                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
  285.                                                 <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  286.                                             </div>
  287.                                         </div>
  288.                                         <div class="col-md-4">
  289.                                             <img class="card-img img-fluid" src="/images/small/img-3.jpg" alt="Card image">
  290.                                         </div>
  291.                                     </div>
  292.                                 </div>
  293.                             </div><!-- end col -->
  295.                         </div>
  296.                         <!-- end row -->
  297.                         
  298.                         <div class="row">
  299.                             <div class="col-lg-4">
  300.                                 <div class="card bg-primary border-primary text-white-50">
  301.                                     <div class="card-body">
  302.                                         <h5 class="mb-3 text-white">Primary Card</h5>
  303.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  304.                                     </div>
  305.                                 </div>
  306.                             </div><!-- end col -->
  307.         
  308.                             <div class="col-lg-4">
  309.                                 <div class="card bg-success border-success text-white-50">
  310.                                     <div class="card-body">
  311.                                         <h5 class="mb-3 text-white">Success Card</h5>
  312.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  313.                                     </div>
  314.                                 </div>
  315.                             </div><!-- end col -->
  316.         
  317.                             <div class="col-lg-4">
  318.                                 <div class="card bg-info border-info text-white-50">
  319.                                     <div class="card-body">
  320.                                         <h5 class="mb-3 text-white">Info Card</h5>
  321.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  322.                                     </div>
  323.                                 </div>
  324.                             </div><!-- end col -->
  326.                         </div>
  327.                         <!-- end row -->
  329.                         <div class="row">
  330.                             <div class="col-lg-4">
  331.                                 <div class="card bg-warning border-warning text-white-50">
  332.                                     <div class="card-body">
  333.                                         <h5 class="mb-4 text-white"><i class="mdi mdi-alert-outline me-3"></i>Warning Card</h5>
  334.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  335.                                     </div>
  336.                                 </div>
  337.                             </div><!-- end col -->
  338.         
  339.                             <div class="col-lg-4">
  340.                                 <div class="card bg-danger border-danger text-white-50">
  341.                                     <div class="card-body">
  342.                                         <h5 class="mb-4 text-white"><i class="mdi mdi-block-helper me-3"></i>Danger Card</h5>
  343.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  344.                                     </div>
  345.                                 </div>
  346.                             </div><!-- end col -->
  347.         
  348.                             <div class="col-lg-4">
  349.                                 <div class="card bg-dark border-dark text-light">
  350.                                     <div class="card-body">
  351.                                         <h5 class="mb-4 text-light"><i class="mdi mdi-alert-circle-outline me-3"></i>Dark Card</h5>
  352.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  353.                                     </div>
  354.                                 </div>
  355.                             </div><!-- end col -->
  356.                         </div>
  357.                         <!-- end row -->
  359.                         <div class="row">
  360.                             <div class="col-lg-4">
  361.                                 <div class="card border border-primary">
  362.                                     <div class="card-header bg-transparent border-primary">
  363.                                         <h5 class="my-0 text-primary"><i class="mdi mdi-bullseye-arrow me-3"></i>Primary outline Card</h5>
  364.                                     </div>
  365.                                     <div class="card-body">
  366.                                         <h5 class="card-title">card title</h5>
  367.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  368.                                     </div>
  369.                                 </div>
  370.                             </div><!-- end col -->
  371.         
  372.                             <div class="col-lg-4">
  373.                                 <div class="card border border-danger">
  374.                                     <div class="card-header bg-transparent border-danger">
  375.                                         <h5 class="my-0 text-danger"><i class="mdi mdi-block-helper me-3"></i>Danger outline Card</h5>
  376.                                     </div>
  377.                                     <div class="card-body">
  378.                                         <h5 class="card-title">card title</h5>
  379.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  380.                                     </div>
  381.                                 </div>
  382.                             </div><!-- end col -->
  383.         
  384.                             <div class="col-lg-4">
  385.                                 <div class="card border border-success">
  386.                                     <div class="card-header bg-transparent border-success">
  387.                                         <h5 class="my-0 text-success"><i class="mdi mdi-check-all me-3"></i>Success Card</h5>
  388.                                     </div>
  389.                                     <div class="card-body">
  390.                                         <h5 class="card-title">card title</h5>
  391.                                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  392.                                     </div>
  393.                                 </div>
  394.                             </div><!-- end col -->
  395.                         </div>
  396.                         <!-- end row -->
  398.                         
  399.                         <div class="row">
  400.                             <div class="col-12">
  401.                                 <h4 class="mt-2 mb-4">Card Groups</h4>
  402.                                 <div class="card-deck-wrapper">
  403.                                     <div class="card-group">
  404.                                         <div class="card mb-4">
  405.                                             <img class="card-img-top img-fluid" src="/images/small/img-4.jpg" alt="Card image cap">
  406.                                             <div class="card-body">
  407.                                                 <h4 class="card-title">Card title</h4>
  408.                                                 <p class="card-text">This is a longer card with supporting text below as
  409.                                                     a natural lead-in to additional content. This content is a little
  410.                                                     bit longer.</p>
  411.                                                 <p class="card-text">
  412.                                                     <small class="text-muted">Last updated 3 mins ago</small>
  413.                                                 </p>
  414.                                             </div>
  415.                                         </div>
  416.                                         <div class="card mb-4">
  417.                                             <img class="card-img-top img-fluid" src="/images/small/img-5.jpg" alt="Card image cap">
  418.                                             <div class="card-body">
  419.                                                 <h4 class="card-title">Card title</h4>
  420.                                                 <p class="card-text">This card has supporting text below as a natural
  421.                                                     lead-in to additional content.</p>
  422.                                                 <p class="card-text">
  423.                                                     <small class="text-muted">Last updated 3 mins ago</small>
  424.                                                 </p>
  425.                                             </div>
  426.                                         </div>
  427.                                         <div class="card mb-4">
  428.                                             <img class="card-img-top img-fluid" src="/images/small/img-6.jpg" alt="Card image cap">
  429.                                             <div class="card-body">
  430.                                                 <h4 class="card-title">Card title</h4>
  431.                                                 <p class="card-text">This is a wider card with supporting text below as
  432.                                                     a natural lead-in to additional content. This card has even longer
  433.                                                     content than the first to show that equal height action.</p>
  434.                                                 <p class="card-text">
  435.                                                     <small class="text-muted">Last updated 3 mins ago</small>
  436.                                                 </p>
  437.                                             </div>
  438.                                         </div>
  439.                                     </div>
  440.                                 </div>
  441.                             </div><!-- end col -->
  442.                         </div>        
  443.                         <!-- end row -->
  445.                         <div class="row">
  446.                             <div class="col-sm-12">
  447.                                 <h4 class="mt-2 mb-4">Cards Masonry</h4>
  449.                                 <div class="row" data-masonry='{"percentPosition": true }'>
  450.                                     <div class="col-sm-6 col-lg-4">
  451.                                         <div class="card">
  452.                                             <img src="/images/small/img-3.jpg" class="card-img-top" alt="...">
  453.                                             <div class="card-body">
  454.                                             <h5 class="card-title">Card title that wraps to a new line</h5>
  455.                                             <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  456.                                             </div>
  457.                                         </div>
  458.                                     </div><!-- end col -->
  460.                                     <div class="col-sm-6 col-lg-4">
  461.                                         <div class="card">
  462.                                             <img src="/images/small/img-5.jpg" class="card-img-top" alt="...">
  463.                                             <div class="card-body">
  464.                                             <h5 class="card-title">Card title</h5>
  465.                                             <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  466.                                             <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  467.                                             </div>
  468.                                         </div>
  469.                                     </div><!-- end col -->
  471.                                     <div class="col-sm-6 col-lg-4">
  472.                                         <div class="card">
  473.                                             <img src="/images/small/img-7.jpg" class="card-img-top" alt="...">
  474.                                         </div>
  475.                                     </div><!-- end col -->
  477.                                     <div class="col-sm-6 col-lg-4">
  478.                                         <div class="card p-3 text-end">
  479.                                             <blockquote class="blockquote blockquote-reverse  mb-0">
  480.                                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  481.                                             <footer class="blockquote-footer mt-0">
  482.                                                 <small class="text-muted">
  483.                                                 Someone famous in <cite title="Source Title">Source Title</cite>
  484.                                                 </small>
  485.                                             </footer>
  486.                                             </blockquote>
  487.                                         </div>
  488.                                     </div><!-- end col -->
  490.                                     <div class="col-sm-6 col-lg-4">
  491.                                         <div class="card">
  492.                                             <div class="card-body">
  493.                                                 <blockquote class="blockquote font-size-14 mb-0">
  494.                                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  495.                                                     <footer class="blockquote-footer mt-0 font-size-12">
  496.                                                         Someone famous in <cite title="Source Title">Source Title</cite>
  497.                                                     </footer>
  498.                                                 </blockquote>
  499.                                             </div>
  500.                                         </div>
  501.                                     </div><!-- end col -->
  502.                                     
  503.                                     <div class="col-sm-6 col-lg-4">
  504.                                         <div class="card bg-primary text-white text-center p-3">
  505.                                             <blockquote class="card-blockquote font-size-14 mb-0">
  506.                                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
  507.                                                 <footer class="blockquote-footer mt-0 text-white font-size-12 mb-0">
  508.                                                     Someone famous in <cite title="Source Title">Source Title</cite>
  509.                                                 </footer>
  510.                                             </blockquote>
  511.                                         </div>
  512.                                     </div><!-- end col -->
  514.                                     <div class="col-sm-6 col-lg-4">
  515.                                         <div class="card">
  516.                                             <div class="card-body">
  517.                                             <h5 class="card-title">Card title</h5>
  518.                                             <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
  519.                                             <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  520.                                             </div>
  521.                                         </div>
  522.                                     </div><!-- end col -->
  524.                                     <div class="col-sm-6 col-lg-4">
  525.                                         <div class="card">
  526.                                             <div class="card-body">
  527.                                             <h5 class="card-title">Card title</h5>
  528.                                             <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
  529.                                             <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  530.                                             </div>
  531.                                         </div>
  532.                                     </div><!-- end col -->                                    
  533.                                     
  534.                                 </div>
  535.                                 <!-- end row -->
  536.                                 
  537.                             </div><!-- end col -->
  539.                         </div>
  540.                         <!-- end row -->
  541.                         
  542.                     </div> <!-- container-fluid -->
  543.                 </div>
  544.                 <!-- End Page-content -->
  545.                 
  546.                 {{ include('partials/footer.html.twig') }}
  547.             </div>
  548.             <!-- end main content-->
  550.         </div>
  551.         <!-- END layout-wrapper -->
  553.         {{ include('partials/right-sidebar.html.twig') }}
  555.         {{ include('partials/vendor-scripts.html.twig') }}
  557.         <!-- Card Masonry -->
  558.         <script src="/libs/masonry-layout/dist/masonry.pkgd.min.js"></script>
  561.         <script src="/js/app.js"></script>
  563.     </body>
  564. </html>