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

Open in your IDE?
  1. {% extends "layouts/services.html.twig" %}
  3. {% block bodyClass %}tpl-program 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-with-menu.html.twig' with {
  14.                 breadcrumb: [
  15.                     { path: path('services-strategy'), title: 'Estratexia' }
  16.                 ],
  17.                 title: 'Programa',
  18.                 submenu: [
  19.                     { path: path('services-activity'), name: 'Actividade' },
  20.                     { path: path('services-activity'), name: 'Actividade' },
  21.                     { path: path('services-activity'), name: 'Actividade' },
  22.                 ]
  23.             } %}
  24.         </div>
  25.     </div>
  26. {% endblock %}
  28. {% block pageContent %}
  30.     <article class="program-wrapper">
  31.         <div class="program-header">
  32.             <figure class="at-image">
  33.                 <img src="https://picsum.photos/1180/280" alt="">
  34.             </figure>
  36.             <div class="at-lead-text">
  37.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  38.                     pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. </p>
  39.             </div>
  41.             <div class="program-description">
  42.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis efficitur massa, quis
  43.                     condimentum ex scelerisque sed. Nunc ornare ligula augue, ac egestas dolor semper sit amet.
  44.                     Nulla lobortis convallis est et ultricies. Nunc id lectus nibh. Donec sodales massa vel
  45.                     dictum volutpat. Aenean facilisis sollicitudin nibh at commodo. Nullam rutrum condimentum
  46.                     dolor, et sodales turpis accumsan et. Ut nec eros justo. Aenean sagittis neque tortor, ac
  47.                     euismod nibh efficitur ac. Suspendisse luctus, felis vel varius tincidunt, felis lorem
  48.                     malesuada nulla, non porttitor felis arcu vel urna. </p>
  49.             </div>
  51.             <aside class="program-attachments">
  52.                 <div class="ml-alert is-attached">
  53.                     <h3 class="at-title">Aviso</h3>
  54.                     <div class="at-text">
  55.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex.</p>
  56.                     </div>
  57.                 </div>
  58.                 <ul class="ml-buttons-list is-vertical">
  59.                     <li>
  60.                         <a href="https://sede.usc.es/sede/publica/index.htm" class="at-button is-tertiary at-icon-external-link">Acceso a procedemento</a>
  61.                     </li>
  62.                     <li>
  63.                         <a href="{{ path('services-procedure') }}" class="at-button is-tertiary at-link-smart-icon">Acceso a trámite</a>
  64.                     </li>
  65.                     <li>
  66.                         <a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a>
  67.                     </li>
  68.                 </ul>
  69.             </aside>
  70.         </div>
  72.         <usc-tabs id="uscTabs01" name="UscTabList">
  73.             <template v-slot:header>
  74.                 <usc-tabs-header-item :is-active="true" controls="tab01">
  75.                     Máis información
  76.                 </usc-tabs-header-item>
  77.                 <usc-tabs-header-item controls="tab02">
  78.                     Datas e tramitación
  79.                 </usc-tabs-header-item>
  80.                 <usc-tabs-header-item controls="tab03">
  81.                     Localización e contacto
  82.                 </usc-tabs-header-item>
  83.                 <usc-tabs-header-item controls="tab04">
  84.                     Outra información
  85.                 </usc-tabs-header-item>
  86.             </template>
  88.             <template v-slot:body>
  89.                 <usc-tabs-body-item :is-active="true" name="tab01">
  90.                     <template v-slot:mobile-header>
  91.                         Máis información
  92.                     </template>
  93.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  94.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  95.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  96.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  97.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  98.                     <usc-accordion id="accordion01">
  99.                         <usc-accordion-item>
  100.                             <template v-slot:header>Item de acordeón 1</template>
  101.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  102.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  103.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  104.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  105.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  106.                                 pulvinar mi odio ut dui.</p>
  107.                         </usc-accordion-item>
  108.                         <usc-accordion-item>
  109.                             <template v-slot:header>Item de acordeón 2</template>
  110.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  111.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  112.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  113.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  114.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  115.                                 pulvinar mi odio ut dui.</p>
  116.                         </usc-accordion-item>
  117.                         <usc-accordion-item>
  118.                             <template v-slot:header>Item de acordeón 3</template>
  119.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex
  120.                                 malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur
  121.                                 a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in,
  122.                                 aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.
  123.                                 Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a
  124.                                 pulvinar mi odio ut dui.</p>
  125.                         </usc-accordion-item>
  126.                     </usc-accordion>
  127.                 </usc-tabs-body-item>
  128.                 <usc-tabs-body-item name="tab02">
  129.                     <template v-slot:mobile-header>
  130.                         Datas e tramitación
  131.                     </template>
  132.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  133.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  134.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  135.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  136.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  137.                     <table>
  138.                         <thead>
  139.                         <tr>
  140.                             <th>Col 1</th>
  141.                             <th>Col 2</th>
  142.                             <th>Col 3</th>
  143.                             <th>Col 4</th>
  144.                             <th>Col 5</th>
  145.                         </tr>
  146.                         </thead>
  147.                         <tbody>
  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.                         <tr>
  163.                             <td>Dato 1</td>
  164.                             <td>Dato 2</td>
  165.                             <td>Dato 3</td>
  166.                             <td>Dato 4</td>
  167.                             <td>Dato 5</td>
  168.                         </tr>
  169.                         </tbody>
  170.                     </table>
  171.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  172.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  173.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  174.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  175.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  176.                         <ul class="ml-buttons-list is-vertical">
  177.                             <li>
  178.                                 <a href="https://sede.usc.es/sede/publica/index.htm" class="at-button is-tertiary at-icon-external-link">Acceso a procedemento administrativo</a>
  179.                             </li>
  180.                             <li>
  181.                                 <a href="{{ path('services-procedure') }}" class="at-button is-tertiary at-icon-play">Acceso a trámite</a>
  182.                             </li>
  183.                         </ul>
  185.                 </usc-tabs-body-item>
  186.                 <usc-tabs-body-item name="tab03">
  187.                     <template v-slot:mobile-header>
  188.                         Localización e contacto
  189.                     </template>
  190.                     <div class="row">
  191.                         <div class="col-lg-6">
  192.                             {% include 'molecules/specs/contact.html.twig'with {
  193.                                 title: 'Unidade relacionada'} %}
  194.                         </div>
  195.                         <div class="col-lg-6">
  196.                             {% include 'molecules/specs/contact.html.twig'with {
  197.                                 title: 'Unidade relacionada'} %}
  198.                         </div>
  199.                     </div>
  200.                 </usc-tabs-body-item>
  201.                 <usc-tabs-body-item name="tab04">
  202.                     <template v-slot:mobile-header>
  203.                         Outra información
  204.                     </template>
  205.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
  206.                         pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor.
  207.                         Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce
  208.                         tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec
  209.                         consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
  211.                     <figure class="at-image">
  212.                         <img src="https://picsum.photos/1024/576" alt="">
  213.                     </figure>
  214.                 </usc-tabs-body-item>
  215.             </template>
  216.         </usc-tabs>
  217.     </article>
  219.     <section class="org-tier">
  220.         <div class="tier-header">
  221.             <h2 class="tier-title">Actividades relacionadas [auto]</h2>
  222.         </div>
  223.         <div class="tier-content">
  224.             <div class="org-modules-container has-banners">
  225.                 {% include 'molecules/banners/m.html.twig' with {
  226.                     modifiers: 'is-services is-activity',
  227.                     title: 'Actividade',
  228.                     hasDate: true,
  229.                 } %}
  231.                 {% include 'molecules/banners/m.html.twig' with {
  232.                     modifiers: 'is-services is-activity',
  233.                     title: 'Actividade',
  234.                     hasDate: true,
  235.                 } %}
  237.                 {% include 'molecules/banners/m.html.twig' with {
  238.                     modifiers: 'is-services is-activity',
  239.                     title: 'Actividade',
  240.                     hasDate: true,
  241.                 } %}
  243.                 {% include 'molecules/banners/m.html.twig' with {
  244.                     modifiers: 'is-services is-activity',
  245.                     title: 'Actividade',
  246.                     hasDate: true,
  247.                 } %}
  248.             </div>
  249.         </div>
  250.     </section>
  252.     <section class="org-tier">
  253.         <div class="tier-header">
  254.             <h2 class="tier-title">Eventos relacionados [auto]</h2>
  255.         </div>
  256.         <div class="tier-content">
  257.             <div class="org-modules-container">
  258.                 {% include 'molecules/events/s.html.twig' with {
  259.                     modifiers: 'is-services',
  260.                     hasDate: true,
  261.                     link: path('services-event'),
  262.                 } %}
  264.                 {% include 'molecules/events/s.html.twig' with {
  265.                     modifiers: 'is-services',
  266.                     hasDate: true,
  267.                     link: path('services-event'),
  268.                 } %}
  270.                 {% include 'molecules/events/s.html.twig' with {
  271.                     modifiers: 'is-services',
  272.                     hasDate: true,
  273.                     link: path('services-event'),
  274.                 } %}
  276.                 {% include 'molecules/events/s.html.twig' with {
  277.                     modifiers: 'is-services',
  278.                     hasDate: true,
  279.                     link: path('services-event'),
  280.                 } %}
  281.             </div>
  282.         </div>
  283.     </section>
  285.     <section class="org-tier">
  286.         <div class="tier-header">
  287.             <h2 class="tier-title">Novas relacionadas</h2>
  288.             <div class="tier-action">
  289.                 <a href="">ver máis</a>
  290.             </div>
  291.         </div>
  292.         <div class="tier-content">
  293.             <div class="org-modules-container">
  294.                 {% include 'molecules/news/m.html.twig' %}
  296.                 {% include 'molecules/news/m.html.twig' %}
  298.                 {% include 'molecules/news/m.html.twig' %}
  299.             </div>
  300.         </div>
  301.     </section>
  306. {% endblock %}
  308. {% block siteFooter %}
  309.     {% include 'organisms/site-footer.html.twig' %}
  310. {% endblock %}