templates/templates/docs/organisms.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/master.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  6.     {{ encore_entry_link_tags('css/styleguide') }}
  7. {% endblock %}
  9. {% block bodyClass %}tpl-generic-page{% endblock %}
  11. {% block pageHeader %}
  12.     {% include 'molecules/page-header.html.twig' with {
  13.         breadcrumb: [
  14.             { path: path('index'), title: 'Libro de estilo web da USC' }
  15.         ],
  16.         title: 'Organismos'
  17.     } %}
  18. {% endblock %}
  20. {% block pageContent %}
  21.     <article class="generic-page-wrapper">
  22.         <div class="generic-page-intro">
  23.             <ul>
  24.                 <li><a href="#accordions">Acordeóns</a></li>
  25.                 <li><a href="#content-blocks">Bloques de contido</a></li>
  26.                 <li><a href="#infinite-scroll">Scroll infinito</a></li>
  27.                 <li><a href="#modules-container">Contedor de módulos</a></li>
  28.                 <li><a href="#site-footer">Pé web</a></li>
  29.                 <li><a href="#site-header">Cabeceira web</a></li>
  30.                 <li><a href="#organization-header">Cabeceira de organización</a></li>
  31.                 <li><a href="#tabs">Lapelas</a></li>
  32.                 <li><a href="#tiers">Pisos</a></li>
  33.                 <li><a href="#content-filter-tiers">Pisos con filtro de contidos</a></li>
  34.                 <li><a href="#content-filter">Filtro de contidos</a></li>
  35.                 <li><a href="#timeline">Liña de tempo</a></li>
  36.             </ul>
  37.         </div>
  38.         <div class="generic-page-content">
  39.             <div class="org-content-block" id="accordions">
  40.                 <div class="content-block-content-wrapper">
  41.                     <h2>Acordeóns</h2>
  43.                     {%
  44.                         set code = '<usc-accordion id="accordion01">
  45.     <usc-accordion-item :is-open="true">
  46.         <template v-slot:header>Item de acordeón 1</template>
  48.         <div class="at-text">
  49.             <p>Contido item 1.</p>
  50.         </div>
  51.     </usc-accordion-item>
  52.     <usc-accordion-item>
  53.         <template v-slot:header>Item de acordeón 2</template>
  55.         <div class="at-text">
  56.             <p>Contido item 2.</p>
  57.         </div>
  58.     </usc-accordion-item>
  59.     <usc-accordion-item>
  60.         <template v-slot:header>Item de acordeón 3</template>
  62.         <div class="at-text">
  63.             <p>Contido item 3.</p>
  64.         </div>
  65.     </usc-accordion-item>
  66. </usc-accordion>'
  67.                     %}
  69.                     <div class="org-example">
  70.                         <div class="example-display">
  71.                             {{ code|raw }}
  72.                         </div>
  74.                         <pre class="example-code"><code>{{ code }}</code></pre>
  75.                     </div>
  76.                 </div>
  77.             </div>
  79.             <div class="org-content-block" id="content-blocks">
  80.                 <div class="content-block-content-wrapper">
  81.                     <h2>Bloques de contido</h2>
  83.                     {%
  84.                         set code = '<div class="org-content-block">
  85.     <aside class="content-block-attachments-wrapper">
  86.         <ul class="ml-buttons-list is-vertical">
  87.             <li>
  88.                 <a href="" class="at-button is-tertiary at-icon-external-link">Ligazón</a>
  89.             </li>
  90.             <li>
  91.                 <a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a>
  92.             </li>
  93.         </ul>
  95.         <div class="ml-alert is-attached">
  96.             <h3 class="at-title">Aviso</h3>
  97.             <div class="at-text">
  98.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex.</p>
  99.             </div>
  100.         </div>
  101.     </aside>
  103.     <div class="content-block-content-wrapper">
  104.         <div class="at-text">
  105.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis efficitur massa, quis condimentum ex scelerisque sed. Nunc ornare ligula augue, ac egestas dolor semper sit amet. Nulla lobortis convallis est et ultricies. Nunc id lectus nibh. Donec sodales massa vel dictum volutpat. Aenean facilisis sollicitudin nibh at commodo. Nullam rutrum condimentum dolor, et sodales turpis accumsan et. Ut nec eros justo. Aenean sagittis neque tortor, ac euismod nibh efficitur ac. Suspendisse luctus, felis vel varius tincidunt, felis lorem malesuada nulla, non porttitor felis arcu vel urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est justo, sed blandit justo placerat vel. Nulla ac consequat purus. Curabitur quis ante quis orci mattis viverra. Quisque non risus justo. Quisque vel tincidunt ex.</p>
  106.         </div>
  107.     </div>
  108. </div>'
  109.                     %}
  111.                     <div class="org-example">
  112.                         <div class="example-display">
  113.                             {{ code|raw }}
  114.                         </div>
  116.                         <pre class="example-code"><code>{{ code }}</code></pre>
  117.                     </div>
  118.                 </div>
  119.             </div>
  121.             <div class="org-content-block" id="infinite-scroll">
  122.                 <div class="content-block-content-wrapper">
  123.                     <h2>Scroll infinito</h2>
  125.                     {%
  126.                         set code = '<usc-infinite-scroll
  127.             endpoint="path-to-endpoint"
  128.             container-selector=".results-wrapper"
  129.     >
  130.         <div class="row results-wrapper">
  131.             <div class="col-md-6">
  132.                 Result 1
  133.             </div>
  134.             <div class="col-md-6">
  135.                 Result 2
  136.             </div>
  137.         </div>
  138.     </usc-infinite-scroll>'
  139.                     %}
  141.                     <div class="org-example">
  142.                         <pre class="example-code"><code>{{ code }}</code></pre>
  143.                     </div>
  144.                 </div>
  145.             </div>
  147.             <div class="org-content-block" id="modules-container">
  148.                 <div class="content-block-content-wrapper">
  149.                     <h2>Contedor de módulos</h2>
  150.                     <p>Os contedores de módulos serven para construír grellas de moléculas de banner, eventos e novas. Este compoñente conta cun modificador para reducir o espazo entre os seus fillos cando contén banners chamado <code>has-banners</code>, e tres modificadores segundo o tamaño de pantalla que ocupe: <code>is-half</code>, <code>is-three-quarters</code> e <code>is-one-quarter</code>.</p>
  152.                     {%
  153.                         set code = '<div class="org-modules-container">
  154.     <!-- Aquí poden ir moléculas de banners, eventos e novas. -->
  155. </div>'
  156.                     %}
  158.                     <div class="org-example">
  159.                         <pre class="example-code"><code>{{ code }}</code></pre>
  160.                     </div>
  161.                 </div>
  162.             </div>
  164.             <div class="org-content-block" id="site-footer">
  165.                 <div class="content-block-content-wrapper">
  166.                     <h2>Pé web</h2>
  168.                     {%
  169.                         set code = '<div class="site-footer-wrapper">
  170.     <footer class="org-site-footer">
  171.         <div class="site-logo-wrapper">
  172.             <!-- Átomo de logo -->
  173.         </div>
  175.         <div class="nav-wrapper">
  176.             <div class="primary-nav-wrapper">
  177.                 <ul class="ml-grouped-nav">
  178.                     <li class="grouped-nav-title">A universidade</li>
  179.                     <li><a href="">USC</a></li>
  180.                     <li><a href="">Graos</a></li>
  181.                     <li><a href="">Máster</a></li>
  182.                     <li><a href="">Doutoramento</a></li>
  183.                 </ul>
  185.                 <!-- Máis menús -->
  186.             </div>
  188.             <div class="secondary-nav-wrapper">
  189.                 <ul class="ml-simple-nav">
  190.                     <li><a href="">Centros</a></li>
  191.                     <li><a href="">Departamentos</a></li>
  192.                     <li><a href="">Servizos</a></li>
  193.                 </ul>
  195.                 <!-- Máis menús -->
  196.             </div>
  197.         </div>
  199.         <div class="logos-wrapper">
  200.             <ul class="ml-logos-list">
  201.                 <li>
  202.                     <a href="" class="at-footer-logo">
  203.                         <img src="/images/logo_temp.png" alt="Logo 1" />
  204.                     </a>
  205.                 </li>
  207.                 <!-- Máis logos -->
  208.             </ul>
  209.         </div>
  210.     </footer>
  211. </div>'
  212.                     %}
  214.                     <div class="org-example">
  215.                         <div class="example-display">
  216.                             {{ code|raw }}
  217.                         </div>
  219.                         <pre class="example-code"><code>{{ code }}</code></pre>
  220.                     </div>
  221.                 </div>
  222.             </div>
  224.             <div class="org-content-block" id="site-header">
  225.                 <div class="content-block-content-wrapper">
  226.                     <h2>Cabeceira web</h2>
  228.                     {%
  229.                         set code = '<the-usc-header>
  230.     <template v-slot:logo>
  231.         <!-- Aquí o átomo de logo -->
  232.     </template>
  234.     <template v-slot:utilities>
  235.         <ul class="nav-items">
  236.             <usc-submenu-nav-item>
  237.                 <template v-slot:name>USC Virtual</template>
  238.                 <template v-slot:submenu>
  239.                     <li class="submenu-item"><a href="">Campus Virtual</a></li>
  240.                     <li class="submenu-item"><a href="">Secretaría Virtual</a></li>
  241.                     <li class="submenu-item"><a href="">Taboleiro</a></li>
  242.                     <li class="submenu-item"><a href="">Minerva</a></li>
  243.                 </template>
  244.             </usc-submenu-nav-item>
  245.             <li><a href="">Sede electrónica</a></li>
  247.             <!-- Máis menus -->
  248.         </ul>
  249.     </template>
  251.     <template v-slot:profiles>
  252.         <ul class="nav-items">
  253.             <li><a href="">Estudantes</a></li>
  254.             <usc-submenu-nav-item>
  255.                 <template v-slot:name>Máis perfís</template>
  256.                 <template v-slot:submenu>
  257.                     <li class="submenu-item"><a href="">PDI</a></li>
  258.                     <li class="submenu-item"><a href="">PAS</a></li>
  259.                 </template>
  260.             </usc-submenu-nav-item>
  261.         </ul>
  263.         <!-- Máis menus -->
  264.     </template>
  266.     <template v-slot:main>
  267.         <ul class="nav-items">
  268.             <usc-submenu-nav-item :show-on-hover="true">
  269.                 <template v-slot:name>USC</template>
  270.                 <template v-slot:submenu>
  271.                     <li class="submenu-item"><a href=""><strong>USC</strong></a></li>
  272.                     <li class="submenu-item"><a href="">A nosa universidade</a></li>
  273.                     <li class="submenu-item"><a href="">Historia e patrimonio</a></li>
  274.                     <li class="submenu-item"><a href="">Organización</a></li>
  275.                     <li class="submenu-item"><a href="">Mecenado</a></li>
  276.                     <li class="submenu-item"><a href="">USC en cifras</a></li>
  277.                 </template>
  278.             </usc-submenu-nav-item>
  279.             <usc-submenu-nav-item item-class="is-studies" :show-on-hover="true">
  280.                 <template v-slot:name>Estudos</template>
  281.                 <template v-slot:submenu>
  282.                     <li class="submenu-item"><a href=""><strong>Estudos</strong></a></li>
  283.                     <li class="submenu-item"><a href="">Graos</a></li>
  284.                     <li class="submenu-item"><a href="">Másteres</a></li>
  285.                     <li class="submenu-item"><a href="">Doutoramento</a></li>
  286.                     <li class="submenu-item"><a href="">Estudos propios</a></li>
  287.                     <li class="submenu-item"><a href="">Cursos e congresos</a></li>
  288.                 </template>
  289.             </usc-submenu-nav-item>
  290.             <li class="is-journal">
  291.                 <a href="">USC Vida</a>
  292.             </li>
  294.             <!-- Máis menus -->
  295.         </ul>
  296.     </template>
  298.     <template v-slot:languages>
  299.         <ul class="nav-items">
  300.             <usc-submenu-nav-item item-class="nav-item is-desktop">
  301.                 <template v-slot:name>GL</template>
  302.                 <template v-slot:submenu>
  303.                     <li class="submenu-item"><a href="">Galego</a></li>
  304.                     <li class="submenu-item"><a href="">Español</a></li>
  305.                     <li class="submenu-item"><a href="">Inglés</a></li>
  306.                 </template>
  307.             </usc-submenu-nav-item>
  308.             <li class="nav-item is-mobile">
  309.                 <a href="">GL</a>
  310.             </li>
  311.             <li class="nav-item is-mobile">
  312.                 <a href="">ES</a>
  313.             </li>
  314.             <li class="nav-item is-mobile">
  315.                 <a href="">EN</a>
  316.             </li>
  317.         </ul>
  318.     </template>
  320.     <template v-slot:search>
  321.         <form method="get" action="" class="ml-form">
  322.             <div class="form-content">
  323.                 <div class="form-group has-button">
  324.                     <label for="site-header-search-input" class="is-sr-only">Busca en toda a web</label>
  325.                     <input type="search" name="q" class="form-control" id="site-header-search-input" placeholder="Busca en toda a web">
  326.                     <button type="submit" class="at-button is-primary">Buscar</button>
  327.                 </div>
  328.             </div>
  329.         </form>
  330.     </template>
  331. </the-usc-header>'
  332.                     %}
  334.                     <div class="org-example">
  335.                         <div class="example-display">
  336.                             {{ code|raw }}
  337.                         </div>
  339.                         <pre class="example-code"><code>{{ code }}</code></pre>
  340.                     </div>
  341.                 </div>
  342.             </div>
  344.             <div class="org-content-block" id="organization-header">
  345.                 <div class="content-block-content-wrapper">
  346.                     <h2>Cabeceira de organización</h2>
  348.                     {%
  349.                         set code = '<the-usc-organization-header>
  350.     <template v-slot:logo>
  351.         <a href="" class="at-site-logo">
  352.             <img src="/images/logo.svg" alt="Universidade de Santiago de Compostela" />
  353.         </a>
  354.     </template>
  356.     <template v-slot:utilities>
  357.         <ul class="nav-items">
  358.             <usc-submenu-nav-item>
  359.                 <template v-slot:name>USC Virtual</template>
  360.                 <template v-slot:submenu>
  361.                     <li class="submenu-item"><a href="">Campus Virtual</a></li>
  362.                     <li class="submenu-item"><a href="">Secretaría Virtual</a></li>
  363.                     <li class="submenu-item"><a href="">Taboleiro</a></li>
  364.                     <li class="submenu-item"><a href="">Minerva</a></li>
  365.                 </template>
  366.             </usc-submenu-nav-item>
  367.             <li><a href="">Sede electrónica</a></li>
  368.             <li><a href="">Directorio</a></li>
  369.         </ul>
  370.     </template>
  372.     <template v-slot:main>
  373.         <ul class="nav-items">
  374.             <li><a href="">USC</a></li>
  375.             <li><a href="" class="is-studies">Estudos</a></li>
  376.             <li><a href="" class="is-admission">Admisión</a></li>
  377.         </ul>
  378.     </template>
  380.     <template v-slot:name>
  381.         <a href="" class="at-organization-name">Nome da Organización</a>
  382.     </template>
  384.     <template v-slot:organization>
  385.         <ul class="nav-items">
  386.             <usc-submenu-nav-item>
  387.                 <template v-slot:name>Exemplo de submenú</template>
  388.                 <template v-slot:submenu>
  389.                     <li class="submenu-item"><a href="">Menú 1</a></li>
  390.                     <li class="submenu-item"><a href="">Menú 2</a></li>
  391.                 </template>
  392.             </usc-submenu-nav-item>
  393.             <li><a href="">Menú 3</a></li>
  394.         </ul>
  395.     </template>
  397.     <template v-slot:languages>
  398.         <ul class="nav-items">
  399.             <usc-submenu-nav-item item-class="nav-item is-desktop">
  400.                 <template v-slot:name>GL</template>
  401.                 <template v-slot:submenu>
  402.                     <li class="submenu-item"><a href="">Galego</a></li>
  403.                     <li class="submenu-item"><a href="">Español</a></li>
  404.                     <li class="submenu-item"><a href="">Inglés</a></li>
  405.                 </template>
  406.             </usc-submenu-nav-item>
  407.             <li class="nav-item is-mobile">
  408.                 <a href="">GL</a>
  409.             </li>
  410.             <li class="nav-item is-mobile">
  411.                 <a href="">ES</a>
  412.             </li>
  413.             <li class="nav-item is-mobile">
  414.                 <a href="">EN</a>
  415.             </li>
  416.         </ul>
  417.     </template>
  419.     <template v-slot:actions>
  420.         <li>
  421.             <a href="" class="at-action at-icon-access">
  422.                 <span class="is-sr-only">Perfil</span>
  423.             </a>
  424.         </li>
  425.     </template>
  426. </the-usc-organization-header>'
  427.                     %}
  429.                     <div class="org-example">
  430.                         <div class="example-display">
  431.                             {{ code|raw }}
  432.                         </div>
  434.                         <pre class="example-code"><code>{{ code }}</code></pre>
  435.                     </div>
  436.                 </div>
  437.             </div>
  439.             <div class="org-content-block" id="tabs">
  440.                 <div class="content-block-content-wrapper">
  441.                     <h2>Lapelas</h2>
  443.                     {%
  444.                         set code = '<usc-tabs id="uscTabs01" name="UscTabList">
  445.     <template v-slot:header>
  446.         <usc-tabs-header-item :is-active="true" controls="tab01">
  447.             Lapela 1
  448.         </usc-tabs-header-item>
  449.         <usc-tabs-header-item controls="tab02">
  450.             Lapela 2
  451.         </usc-tabs-header-item>
  452.     </template>
  453.     <template v-slot:body>
  454.         <usc-tabs-body-item :is-active="true" name="tab01">
  455.             <template v-slot:mobile-header>
  456.                 Lapela 1
  457.             </template>
  459.             <div class="at-text">
  460.                 <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>
  461.             </div>
  462.         </usc-tabs-body-item>
  463.         <usc-tabs-body-item name="tab02">
  464.             <template v-slot:mobile-header>
  465.                 Lapela 2
  466.             </template>
  468.             <div class="at-text">
  469.                 <p>Contido lapela 2.</p>
  470.             </div>
  471.         </usc-tabs-body-item>
  472.     </template>
  473. </usc-tabs>'
  474.                     %}
  476.                     <div class="org-example">
  477.                         <div class="example-display">
  478.                             {{ code|raw }}
  479.                         </div>
  481.                         <pre class="example-code"><code>{{ code }}</code></pre>
  482.                     </div>
  483.                 </div>
  484.             </div>
  486.             <div class="org-content-block" id="tiers">
  487.                 <div class="content-block-content-wrapper">
  488.                     <h2>Pisos</h2>
  490.                     {%
  491.                         set code = '<section class="org-tier">
  492.     <div class="tier-header">
  493.         <h2 class="tier-title">Título do piso</h2>
  494.         <div class="tier-action">
  495.             <a href="">ver máis</a>
  496.         </div>
  497.     </div>
  498.     <div class="tier-content">
  499.         <!-- Contido do piso -->
  500.     </div>
  501. </section>
  503. <section class="org-tier">
  504.     <div class="tier-content">
  505.         <!-- Contido do piso sen cabeceira -->
  506.     </div>
  507. </section>
  509. <section class="org-tier is-minimal">
  510.     <div class="tier-content">
  511.         <!-- Contido do piso minimal -->
  512.     </div>
  513. </section>'
  514.                     %}
  516.                     <div class="org-example">
  517.                         <div class="example-display">
  518.                             {{ code|raw }}
  519.                         </div>
  521.                         <pre class="example-code"><code>{{ code }}</code></pre>
  522.                     </div>
  523.                 </div>
  524.             </div>
  526.             <div class="org-content-block" id="content-filter-tiers">
  527.                 <div class="content-block-content-wrapper">
  528.                     <h2>Pisos con filtro de contidos</h2>
  530.                     {%
  531.                         set code = '<usc-content-filter-tier
  532.     :tier-options="[{ key: \'is-areas\', name: \'Por áreas\'}, { key: \'is-campus\', name: \'Por campus\'}]"
  533.     :options="[{key: null, name: \'Todo\', selected: true}, {key: \'is-type-1\', type: \'is-areas\', name: \'Artes e humanidades\', selected: false}, {key: \'is-type-2\', type: \'is-areas\', name: \'Ciencias da Saúde\', selected: false}, {key: \'is-santiago\', type: \'is-campus\', name: \'Santiago\', selected: false}, {key: \'is-lugo\', type: \'is-campus\', name: \'Lugo\', selected: false} ]"
  534. >
  535.     <template v-slot:action>
  536.         <a href="">Ver máis</a>
  537.     </template>
  539.     <template v-slot:content>
  540.         <div class="org-modules-container has-banners">
  541.             <!-- Módulos coas claves de `options` como clases para poder ser filtrados  -->
  542.         </div>
  543.     </template>
  544. </usc-content-filter-tier>'
  545.                     %}
  547.                     <div class="org-example">
  548.                         <div class="example-display">
  549.                             {{ code|raw }}
  550.                         </div>
  552.                         <pre class="example-code"><code>{{ code }}</code></pre>
  553.                     </div>
  554.                 </div>
  555.             </div>
  557.             <div class="org-content-block" id="content-filter">
  558.                 <div class="content-block-content-wrapper">
  559.                     <h2>Filtro de contidos</h2>
  561.                     {%
  562.                         set code = '<usc-content-filter
  563.     :options="[{key: null, name: \'Todo\', selected: true}, {key: \'is-type-1\', name: \'Artes e humanidades\', selected: false}, {key: \'is-type-2\', name: \'Ciencias da Saúde\', selected: false} ]"
  564. >
  565.     <div class="org-modules-container has-banners">
  566.         <!-- Módulos coas claves de `options` como clases para poder ser filtrados  -->
  567.     </div>
  568. </usc-content-filter>'
  569.                     %}
  571.                     <div class="org-example">
  572.                         <div class="example-display">
  573.                             {{ code|raw }}
  574.                         </div>
  576.                         <pre class="example-code"><code>{{ code }}</code></pre>
  577.                     </div>
  578.                 </div>
  579.             </div>
  581.             <div class="org-content-block" id="timeline">
  582.                 <div class="content-block-content-wrapper">
  583.                     <h2>Liña de tempo</h2>
  584.                     <p>A liña de tempo componse de unha ou varias fases, e estas á vez teñen un ou varios elementos.</p>
  586.                     {%
  587.                         set code = '<div class="org-timeline">
  588.     <article class="org-timeline-phase">
  589.         <header class="ml-timeline-phase-header">
  590.             <h1 class="at-title">Título da etapa</h1>
  591.             <h2 class="timeline-phase-subtitle">Subtítulo da etapa</h2>
  592.             <div class="at-text">
  593.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  594.             </div>
  595.         </header>
  597.         <ul class="timeline-phase-item-list">
  598.             <li class="timeline-phase-item-wrapper">
  599.                 <div class="ml-timeline-phase-item">
  600.                     <span class="timeline-phase-item-date">01/01/1900</span>
  601.                     <h3 class="at-title">Evento 1</h3>
  602.                     <div class="at-text">
  603.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>
  604.                     </div>
  605.                 </div>
  607.                 <!-- Máis items da liña de tempo -->
  608.             </li>
  609.         </ul>
  610.     </article>
  612.     <!-- Máis fases da liña de tempo -->
  613. </div>'
  614.                     %}
  616.                     <div class="org-example">
  617.                         <pre class="example-code"><code>{{ code }}</code></pre>
  618.                     </div>
  620.                     <p>Para as liñas de tempo con moito contido é recomendable usar o compoñente en versión Javascript, que proporciona unha visualización máis comprimida. <a href="{{ path('timeline') }}">Nesta páxina</a> pódese consultar un exemplo en funcionamento.</p>
  622.                     {%
  623.                         set code = '<usc-timeline>
  624.     <usc-timeline-phase :items=\'[{"date":"01/01/1900","title":"Evento 1","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 2","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 3","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"},{"date":"01/01/1900","title":"Evento 4","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 5","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"}]\'>
  625.         <h1 class="at-title">Etapa primeira</h1>
  626.         <h2 class="timeline-phase-subtitle">Século XIV</h2>
  627.         <div class="at-text">
  628.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  629.         </div>
  630.     </usc-timeline-phase>
  632.     <usc-timeline-phase :items=\'[{"date":"01/01/1900","title":"Evento 1","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 2","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 3","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"},{"date":"01/01/1900","title":"Evento 4","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null}]\'>
  633.         <h1 class="at-title">Etapa segunda</h1>
  634.         <h2 class="timeline-phase-subtitle">Século XV</h2>
  635.         <div class="at-text">
  636.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  637.         </div>
  638.     </usc-timeline-phase>
  639. </usc-timeline>'
  640.                     %}
  642.                     <div class="org-example">
  643.                         <pre class="example-code"><code>{{ code }}</code></pre>
  644.                     </div>
  646.                 </div>
  647.             </div>
  648.         </div>
  649.     </article>
  650. {% endblock %}