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

Open in your IDE?
  1. {% extends "layouts/services.html.twig" %}
  3. {% block bodyClass %}tpl-activity has-areas-skin{% endblock %}
  5. {% block siteHeader %}
  6.     {% include 'organisms/services-area-header.html.twig' with {
  7.       logo: asset('/images/logo-neg.svg')
  8. } %}{% endblock %}
  10. {% block pageHeader %}
  11.     <div class="page-header-wrapper">
  12.         <div class="container">
  13.             {% include 'molecules/page-header.html.twig' with {
  14.                 breadcrumb: [
  15.                     { path: path('services-strategy'), title: 'Estratexia' },
  16.                     { path: path('services-program'), title: 'Programa' }
  17.                 ],
  18.                 title: 'Actividade',
  19.             } %}
  20.         </div>
  21.     </div>
  22. {% endblock %}
  24. {% block pageContent %}
  26.     <article class="activity-wrapper">
  27.         <div class="activity-header">
  28.             <div class="at-lead-text">
  29.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  30.                     pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. </p>
  31.             </div>
  33.             <div class="activity-description">
  34.                 <figure class="at-image">
  35.                     <img src="https://picsum.photos/1024/576" alt="">
  36.                 </figure>
  37.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis efficitur massa, quis
  38.                     condimentum ex scelerisque sed. Nunc ornare ligula augue, ac egestas dolor semper sit amet. Nulla
  39.                     lobortis convallis est et ultricies. Nunc id lectus nibh. Donec sodales massa vel dictum volutpat.
  40.                     Aenean facilisis sollicitudin nibh at commodo. Nullam rutrum condimentum dolor, et sodales turpis
  41.                     accumsan et. Ut nec eros justo.</p>
  42.             </div>
  44.             <aside class="activity-attachments">
  45.                 <div class="ml-alert is-attached">
  46.                     <h3 class="at-title">Aviso</h3>
  47.                     <div class="at-text">
  48.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex.</p>
  49.                     </div>
  50.                 </div>
  51.                 <ul class="ml-buttons-list is-vertical">
  52.                     <li>
  53.                         <a href="https://sede.usc.es/sede/publica/index.htm" class="at-button is-tertiary at-icon-external-link">Acceso a procedemento</a>
  54.                     </li>
  55.                     <li>
  56.                         <a href="{{ path('services-procedure') }}" class="at-button is-tertiary at-icon-play">Acceso a trámite</a>
  57.                     </li>
  58.                     <li>
  59.                         <a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a>
  60.                     </li>
  61.                 </ul>
  62.             </aside>
  63.         </div>
  65.         <usc-tabs id="uscTabs01" name="UscTabList">
  66.             <template v-slot:header>
  67.                 <usc-tabs-header-item :is-active="true" controls="tab01">
  68.                     Máis información
  69.                 </usc-tabs-header-item>
  70.                 <usc-tabs-header-item controls="tab02">
  71.                     Datas e tramitación
  72.                 </usc-tabs-header-item>
  73.                 <usc-tabs-header-item controls="tab03">
  74.                     Localización e contacto
  75.                 </usc-tabs-header-item>
  76.                 <usc-tabs-header-item controls="tab04">
  77.                     Outra información
  78.                 </usc-tabs-header-item>
  79.             </template>
  81.             <template v-slot:body>
  82.                 <usc-tabs-body-item :is-active="true" name="tab01">
  83.                     <template v-slot:mobile-header>
  84.                         Máis información
  85.                     </template>
  86.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  87.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  88.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  89.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  90.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  91.                     <usc-accordion id="accordion01">
  92.                         <usc-accordion-item>
  93.                             <template v-slot:header>Item de acordeón 1</template>
  94.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  95.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  96.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  97.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  98.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  99.                                 pulvinar mi odio ut dui.</p>
  100.                         </usc-accordion-item>
  101.                         <usc-accordion-item>
  102.                             <template v-slot:header>Item de acordeón 2</template>
  103.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  104.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  105.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  106.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  107.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  108.                                 pulvinar mi odio ut dui.</p>
  109.                         </usc-accordion-item>
  110.                         <usc-accordion-item>
  111.                             <template v-slot:header>Item de acordeón 3</template>
  112.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  113.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  114.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  115.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  116.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  117.                                 pulvinar mi odio ut dui.</p>
  118.                         </usc-accordion-item>
  119.                     </usc-accordion>
  120.                 </usc-tabs-body-item>
  121.                 <usc-tabs-body-item name="tab02">
  122.                     <template v-slot:mobile-header>
  123.                         Datas e tramitación
  124.                     </template>
  125.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  126.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  127.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  128.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  129.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  130.                     <table class="ml-table">
  131.                         <thead>
  132.                         <tr>
  133.                             <th>Col 1</th>
  134.                             <th>Col 2</th>
  135.                             <th>Col 3</th>
  136.                             <th>Col 4</th>
  137.                             <th>Col 5</th>
  138.                         </tr>
  139.                         </thead>
  140.                         <tbody>
  141.                         <tr>
  142.                             <td>Dato 1</td>
  143.                             <td>Dato 2</td>
  144.                             <td>Dato 3</td>
  145.                             <td>Dato 4</td>
  146.                             <td>Dato 5</td>
  147.                         </tr>
  148.                         <tr>
  149.                             <td>Dato 1</td>
  150.                             <td>Dato 2</td>
  151.                             <td>Dato 3</td>
  152.                             <td>Dato 4</td>
  153.                             <td>Dato 5</td>
  154.                         </tr>
  155.                         <tr>
  156.                             <td>Dato 1</td>
  157.                             <td>Dato 2</td>
  158.                             <td>Dato 3</td>
  159.                             <td>Dato 4</td>
  160.                             <td>Dato 5</td>
  161.                         </tr>
  162.                         </tbody>
  163.                     </table>
  164.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  165.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  166.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  167.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  168.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  169.                     <ul class="ml-buttons-list is-vertical">
  170.                         <li>
  171.                             <a href="https://sede.usc.es/sede/publica/index.htm" class="at-button is-tertiary at-icon-external-link">Acceso a procedemento administrativo</a>
  172.                         </li>
  173.                         <li>
  174.                             <a href="{{ path('services-procedure') }}" class="at-button is-tertiary at-icon-play">Acceso a trámite</a>
  175.                         </li>
  176.                     </ul>
  178.                 </usc-tabs-body-item>
  179.                 <usc-tabs-body-item name="tab03">
  180.                     <template v-slot:mobile-header>
  181.                         Localización e contacto
  182.                     </template>
  183.                     <div class="row">
  184.                         <div class="col-lg-6">
  185.                             {% include 'molecules/specs/contact.html.twig'with {
  186.                                 title: 'Unidade relacionada'} %}
  187.                         </div>
  188.                         <div class="col-lg-6">
  189.                             {% include 'molecules/specs/contact.html.twig'with {
  190.                                 title: 'Información de contacto'} %}
  191.                         </div>
  192.                     </div>
  193.                 </usc-tabs-body-item>
  194.                 <usc-tabs-body-item name="tab04">
  195.                     <template v-slot:mobile-header>
  196.                         Outra información
  197.                     </template>
  198.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  199.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  200.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  201.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  202.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  204.                     <figure class="at-image">
  205.                         <img src="https://picsum.photos/1024/576" alt="">
  206.                     </figure>
  207.                 </usc-tabs-body-item>
  208.             </template>
  209.         </usc-tabs>
  210.     </article>
  212.     <section class="org-tier">
  213.         <div class="tier-header">
  214.             <h2 class="tier-title">Eventos relacionados</h2>
  215.         </div>
  216.         <div class="tier-content">
  217.             <div class="org-modules-container">
  218.                 {% include 'molecules/events/s.html.twig' with {
  219.                     modifiers: 'is-services',
  220.                     link: path('services-event'),
  221.                     hasDate: true,
  222.                 } %}
  224.                 {% include 'molecules/events/s.html.twig' with {
  225.                     modifiers: 'is-services',
  226.                     link: path('services-event'),
  227.                     hasDate: true,
  228.                 } %}
  230.                 {% include 'molecules/events/s.html.twig' with {
  231.                     modifiers: 'is-services',
  232.                     link: path('services-event'),
  233.                     hasDate: true,
  234.                 } %}
  236.                 {% include 'molecules/events/s.html.twig' with {
  237.                     modifiers: 'is-services',
  238.                     link: path('services-event'),
  239.                     hasDate: true,
  240.                 } %}
  241.             </div>
  242.         </div>
  243.     </section>
  245. {% endblock %}
  247. {% block siteFooter %}
  248.     {% include 'organisms/site-footer.html.twig' %}
  249. {% endblock %}