templates/templates/pages/services/services-facility.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/services.html.twig" %}
  3. {% block bodyClass %}tpl-service tpl-facility has-areas-skin{% endblock %}
  5. {% block siteHeader %}
  6.     {% include 'organisms/services-area-header.html.twig' with {
  7.         logo: asset('/images/logo-neg.svg')
  8.     } %}
  9. {% endblock %}
  11. {% block pageHeader %}
  12.     <div class="page-header-wrapper" style="background-image: url('https://picsum.photos/1440/200');">
  13.         <div class="container">
  14.             {% include 'molecules/page-header.html.twig' with {
  15.                 title: 'Instalación',
  16.             } %}
  17.         </div>
  18.     </div>
  19. {% endblock %}
  21. {% block pageContent %}
  23. <article class="service-wrapper">
  24.     <div class="service-header">
  25.         <div class="service-contact-info">
  26.             {% include 'molecules/specs/contact.html.twig' with {
  27.               title: 'Contacto',
  28.             } %}
  29.             {% include 'molecules/social-button-list.html.twig' %}
  30.         </div>
  32.         <div class="service-description">
  33.             <div class="at-lead-text">
  34.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin.</p>
  35.             </div>
  36.         </div>
  38.         <aside class="service-attachments">
  39.             <div class="ml-alert is-attached">
  40.                 <h3 class="at-title">Aviso</h3>
  41.                 <div class="at-text">
  42.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex.</p>
  43.                 </div>
  44.             </div>
  46.             <ul class="ml-buttons-list is-vertical">
  47.               <li>
  48.                   <a href="" class="at-button is-tertiary at-icon-external-link">Recurso externo</a>
  49.               </li>
  50.               <li>
  51.                   <a href="" class="at-button is-tertiary at-icon-external-link">Recurso externo</a>
  52.               </li>
  53.               <li>
  54.                   <a href="" class="at-button is-tertiary at-icon-external-link">Recurso externo</a>
  55.               </li>
  56.             </ul>
  57.         </aside>
  58.     </div>
  60. <usc-tabs id="uscTabs01" name="UscTabList">
  61.     <template v-slot:header>
  62.         <usc-tabs-header-item :is-active="true" controls="tab01">
  63.           Máis información
  64.         </usc-tabs-header-item>
  65.         <usc-tabs-header-item controls="tab02">
  66.           Trámitación
  67.         </usc-tabs-header-item>
  68.         <usc-tabs-header-item controls="tab03">
  69.           Instalacións
  70.         </usc-tabs-header-item>
  71.         <usc-tabs-header-item controls="tab04">
  72.           Recursos materiais
  73.         </usc-tabs-header-item>
  74.         <usc-tabs-header-item controls="tab05">
  75.           Directorio
  76.         </usc-tabs-header-item>
  77.         <usc-tabs-header-item controls="tab06">
  78.           Outra información
  79.         </usc-tabs-header-item>
  80.     </template>
  82.     <template v-slot:body>
  83.         <usc-tabs-body-item :is-active="true" name="tab01">
  84.             <template v-slot:mobile-header>
  85.               Máis información
  86.             </template>
  87.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  88.             <h3 class="at-title is-subhead">Título</h3>
  89.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  90.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  91.         </usc-tabs-body-item>
  92.         <usc-tabs-body-item name="tab02">
  93.             <template v-slot:mobile-header>
  94.               Trámitación
  95.             </template>
  96.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  97.             <table class="ml-table">
  98.                 <thead>
  99.                 <tr>
  100.                     <th>Col 1</th>
  101.                     <th>Col 2</th>
  102.                     <th>Col 3</th>
  103.                     <th>Col 4</th>
  104.                     <th>Col 5</th>
  105.                 </tr>
  106.                 </thead>
  107.                 <tbody>
  108.                 <tr>
  109.                     <td>Dato 1</td>
  110.                     <td>Dato 2</td>
  111.                     <td>Dato 3</td>
  112.                     <td>Dato 4</td>
  113.                     <td>Dato 5</td>
  114.                 </tr>
  115.                 <tr>
  116.                     <td>Dato 1</td>
  117.                     <td>Dato 2</td>
  118.                     <td>Dato 3</td>
  119.                     <td>Dato 4</td>
  120.                     <td>Dato 5</td>
  121.                 </tr>
  122.                 <tr>
  123.                     <td>Dato 1</td>
  124.                     <td>Dato 2</td>
  125.                     <td>Dato 3</td>
  126.                     <td>Dato 4</td>
  127.                     <td>Dato 5</td>
  128.                 </tr>
  129.                 </tbody>
  130.             </table>
  131.             <h3 class="at-title is-subhead">Título</h3>
  132.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  133.             <ul class="ml-buttons-list is-horizontal">
  134.                 <li>
  135.                     <a href="" class="at-button is-tertiary at-icon-external-link">Acceso a trátmite</a>
  136.                 </li>
  137.                 <li>
  138.                     <a href="" class="at-button is-tertiary at-icon-external-link">Acceso a trátmite</a>
  139.                 </li>
  140.             </ul>
  141.         </usc-tabs-body-item>
  143.         <usc-tabs-body-item name="tab03">
  144.             <template v-slot:mobile-header>
  145.               Instalacións
  146.             </template>
  147.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  148.             <div class="row">
  149.               <div class="col-lg-6">
  150.                 {% include 'molecules/specs/contact.html.twig'with {
  151.                  title: 'Instalación'} %}
  152.               </div>
  153.               <div class="col-lg-6">
  154.                 {% include 'molecules/specs/contact.html.twig'with {
  155.                  title: 'Instalación'} %}
  156.               </div>
  157.             </div>
  158.         </usc-tabs-body-item>
  160.         <usc-tabs-body-item name="tab04">
  161.             <template v-slot:mobile-header>
  162.               Recursos materiais
  163.             </template>
  164.             <figure class="at-image">
  165.                 <img src="https://picsum.photos/1024/576" alt="">
  166.             </figure>
  167.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  168.             <usc-accordion id="accordion01">
  169.                 <usc-accordion-item>
  170.                     <template v-slot:header>Recurso</template>
  171.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  172.                 </usc-accordion-item>
  173.                 <usc-accordion-item>
  174.                   <template v-slot:header>Recurso</template>
  175.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  176.                 </usc-accordion-item>
  177.                 <usc-accordion-item>
  178.                   <template v-slot:header>Recurso</template>
  179.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  180.                 </usc-accordion-item>
  181.             </usc-accordion>
  182.         </usc-tabs-body-item>
  185.         <usc-tabs-body-item name="tab05">
  186.             <template v-slot:mobile-header>
  187.               Directorio
  188.             </template>
  189.             <div class="row">
  190.               <div class="col-lg-6">
  191.                 {% include 'molecules/specs/contact.html.twig'with {
  192.                  title: 'Contacto relacionado'} %}
  193.               </div>
  194.               <div class="col-lg-6">
  195.                 {% include 'molecules/specs/contact.html.twig'with {
  196.                   title: 'Contacto relacionado'} %}
  197.               </div>
  198.             </div>
  199.         </usc-tabs-body-item>
  200.         <usc-tabs-body-item name="tab06">
  201.             <template v-slot:mobile-header>
  202.               Outra información
  203.             </template>
  204.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  206.             <figure class="at-image">
  207.                 <img src="https://picsum.photos/1024/576" alt="">
  208.             </figure>
  209.         </usc-tabs-body-item>
  210.     </template>
  211. </usc-tabs>
  213. </article>
  215. <section class="org-tier">
  216.     <div class="tier-header">
  217.         <h2 class="tier-title">Actividades relacionadas [auto]</h2>
  218.     </div>
  219.     <div class="org-modules-container has-banners">
  220.         {% include 'molecules/banners/m.html.twig' with {
  221.             modifiers: 'is-services is-program',
  222.             title: 'Programa',
  223.             link: path ('services-program'),
  224.         } %}
  225.         {% include 'molecules/banners/m.html.twig' with {
  226.             modifiers: 'is-services is-program',
  227.             title: 'Programa',
  228.             link: path ('services-program'),
  229.         } %}
  230.         {% include 'molecules/banners/m.html.twig' with {
  231.             modifiers: 'is-services is-activity',
  232.             title: 'Actividade',
  233.             link: path ('services-activity'),
  234.         } %}
  235.         {% include 'molecules/banners/m.html.twig' with {
  236.             modifiers: 'is-services is-activity',
  237.             title: 'Actividade',
  238.             link: path ('services-activity'),
  239.         } %}
  240.     </div>
  241. </section>
  247. {% endblock %}
  249. {% block siteFooter %}
  250.     {% include 'organisms/site-footer.html.twig' %}
  251. {% endblock %}