templates/templates/docs/molecules.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') }}
  8.     <style type="text/css">
  9.         .ml-banner,
  10.         .ml-event,
  11.         .ml-news {
  12.             margin-bottom: 1.25rem;
  13.         }
  14.     </style>
  15. {% endblock %}
  17. {% block bodyClass %}tpl-generic-page{% endblock %}
  19. {% block pageHeader %}
  20.     {% include 'molecules/page-header.html.twig' with {
  21.         breadcrumb: [
  22.             { path: path('index'), title: 'Libro de estilo web da USC' }
  23.         ],
  24.         title: 'Moléculas'
  25.     } %}
  26. {% endblock %}
  28. {% block pageContent %}
  29. <article class="generic-page-wrapper">
  30.     <div class="generic-page-intro">
  31.         <ul>
  32.             <li><a href="#alerts">Alertas</a></li>
  33.             <li><a href="#alphabetic-filter">Filtros alfabéticos</a></li>
  34.             <li><a href="#authors">Autorías</a></li>
  35.             <li><a href="#banners">Banners</a></li>
  36.             <li><a href="#buttons-list">Listas de botóns</a></li>
  37.             <li><a href="#doughnut-charts">Gráficos tipo donut</a></li>
  38.             <li><a href="#events">Eventos</a></li>
  39.             <li><a href="#forms">Formularios</a></li>
  40.             <li><a href="#metrics">Datos</a></li>
  41.             <li><a href="#news">Novas</a></li>
  42.             <li><a href="#notices">Anuncios</a></li>
  43.             <li><a href="#page-header">Cabeceira de páxina</a></li>
  44.             <li><a href="#pagination">Paxinación</a></li>
  45.             <li><a href="#search-results">Resultados de busca</a></li>
  46.             <li><a href="#specs">Fichas técnicas</a></li>
  47.             <li><a href="#tables">Táboas</a></li>
  48.             <li><a href="#tags-lists">Listas de etiquetas</a></li>
  49.             <li><a href="#version-info">Información de actualización</a></li>
  50.             <li><a href="#carousel">Carrusel de imaxes</a></li>
  51.             <li><a href="#filters-group">Grupo de filtros</a></li>
  52.             <li><a href="#generic-summary">Sumario xeral</a></li>
  53.             <li><a href="#academic-subject">Asignatura</a></li>
  54.             <li><a href="#members">Persoal da universidade</a></li>
  55.             <li><a href="#tooltip">Descrición emerxente (tooltip)</a></li>
  56.         </ul>
  57.     </div>
  58.     <div class="generic-page-content">
  59.         <div class="org-content-block" id="alerts">
  60.             <div class="content-block-content-wrapper">
  61.                 <h2>Alertas</h2>
  63.                 {%
  64.                     set code = '<div class="ml-alert">
  65.     <div class="at-text">
  66.         <strong>Aviso importante:</strong> aberto o prazo de algo importante
  67.     </div>
  68.     <a href="" class="alert-link"><span class="is-sr-only">Ir ao destino do aviso</span></a>
  69. </div>
  71. <div class="ml-alert is-clickable">
  72.     <a href="" class="alert-link">
  73.         <div class="at-text">
  74.             <strong>Aviso importante:</strong> alerta con toda a superficie clicable
  75.         </div>
  76.     </a>
  77. </div>
  79. <div class="ml-alert is-error">
  80.     <div class="at-text">
  81.         <strong>Ocorreu un erro:</strong> revisa os datos do formulario
  82.     </div>
  83.     <a href="" class="alert-link"><span class="is-sr-only">Ir ao destino do aviso</span></a>
  84. </div>'
  85.                 %}
  87.                 <div class="org-example">
  88.                     <div class="example-display">
  89.                         {{ code|raw }}
  90.                     </div>
  92.                     <pre class="example-code"><code>{{ code }}</code></pre>
  93.                 </div>
  95.                 <p>Alerta en pequeno, adxunta a outro contido ou nunha grella. O botón de acción é opcional.</p>
  97.                 {%
  98.                     set code = '<div class="ml-alert is-attached">
  99.     <h3 class="at-title">Aviso</h3>
  100.     <div class="at-text">
  101.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  102.     </div>
  103.     <a href="" class="at-button is-primary">Acción</a>
  104. </div>'
  105.                 %}
  107.                 <div class="org-example">
  108.                     <div class="example-display">
  109.                         {{ code|raw }}
  110.                     </div>
  112.                     <pre class="example-code"><code>{{ code }}</code></pre>
  113.                 </div>
  114.             </div>
  115.         </div>
  117.         <div class="org-content-block" id="alphabetic-filter">
  118.             <div class="content-block-content-wrapper">
  119.                 <h2>Filtros alfabéticos</h2>
  121.                 {%
  122.                     set code = '<div class="ml-alphabetic-filter">
  123.     <ul class="alphabetic-filter-letters-list">
  124.         <li><a href="" class="at-alphabetic-filter-letter is-selected">A</a></li>
  125.         <li><a href="" class="at-alphabetic-filter-letter">B</a></li>
  126.         <li><a href="" class="at-alphabetic-filter-letter">C</a></li>
  127.         <li><a href="" class="at-alphabetic-filter-letter">D</a></li>
  128.         <li><a href="" class="at-alphabetic-filter-letter">E</a></li>
  129.     </ul>
  130. </div>'
  131.                 %}
  133.                 <div class="org-example">
  134.                     <div class="example-display">
  135.                         {{ code|raw }}
  136.                     </div>
  138.                     <pre class="example-code"><code>{{ code }}</code></pre>
  139.                 </div>
  140.             </div>
  141.         </div>
  143.         <div class="org-content-block" id="authors">
  144.             <div class="content-block-content-wrapper">
  145.                 <h2>Autorías</h2>
  147.                 {%
  148.                     set code = '<article class="ml-author">
  149.     <div class="author-avatar-wrapper">
  150.         <img src="https://picsum.photos/500/500" alt="">
  151.     </div>
  152.     <div class="author-content-wrapper">
  153.         <h3 class="at-title">Nome da autora</h3>
  154.         <div class="at-text">
  155.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  156.         </div>
  157.         <ul class="author-contacts-list">
  158.             <li><a href="">autora@info.net</a></li>
  159.             <li><a href="">@autora</a></li>
  160.         </ul>
  161.     </div>
  162. </article>'
  163.                 %}
  165.                 <div class="org-example">
  166.                     <div class="example-display">
  167.                         {{ code|raw }}
  168.                     </div>
  170.                     <pre class="example-code"><code>{{ code }}</code></pre>
  171.                 </div>
  172.             </div>
  173.         </div>
  175.         <div class="org-content-block" id="banners">
  176.             <aside class="content-block-attachments-wrapper">
  177.                 <div class="ml-alert is-attached">
  178.                     <h3 class="at-title">Modificadores de cor</h3>
  179.                     <div class="at-text">
  180.                         <p>Os banners dispoñen das seguintes clases modificadoras de cor: <code>is-studies</code>, <code>is-admission</code>, <code>is-research</code> e <code>is-journal</code>. Todos eles dispoñen ademais do modificador <code>is-light</code> para usar a versión clara da gama de cores.</p>
  181.                     </div>
  182.                 </div>
  183.             </aside>
  184.             <div class="content-block-content-wrapper">
  185.                 <h2>Banners</h2>
  186.                 <p>Os banners teñen un sistema de tallas e cores controlados a través de modificadores. Se un banner non ten que levar ligazón chega con non incluír a etiqueta <code>&lt;a&gt;</code> no marcado do compoñente.</p>
  188.                 <h3>Talla S</h3>
  190.                 {%
  191.                     set code = '<article class="ml-banner is-s">
  192.     <a href="" class="banner-link">
  193.         <div class="banner-content-wrapper">
  194.             <div class="banner-content">
  195.                 <h2 class="at-title">Banner S</h2>
  196.             </div>
  197.         </div>
  198.     </a>
  199. </article>'
  200.                 %}
  202.                 <div class="org-example">
  203.                     <div class="example-display">
  204.                         {{ code|raw }}
  205.                     </div>
  207.                     <pre class="example-code"><code>{{ code }}</code></pre>
  208.                 </div>
  210.                 <h3>Talla M</h3>
  212.                 {%
  213.                     set code = '<article class="ml-banner is-m">
  214.     <a href="" class="banner-link">
  215.         <div class="banner-content-wrapper">
  216.             <div class="banner-content">
  217.                 <h2 class="at-title">Banner M</h2>
  218.                 <div class="at-text">
  219.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.     </a>
  224. </article>
  226. <article class="ml-banner is-m has-media">
  227.     <a href="" class="banner-link">
  228.         <div class="banner-media-wrapper">
  229.             <img src="https://picsum.photos/700/394" alt="">
  230.         </div>
  231.         <div class="banner-content-wrapper">
  232.             <div class="banner-content">
  233.                 <h2 class="at-title">Banner M</h2>
  234.                 <div class="at-text">
  235.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  236.                 </div>
  237.             </div>
  238.         </div>
  239.     </a>
  240. </article>'
  241.                 %}
  243.                 <div class="org-example">
  244.                     <div class="example-display">
  245.                         {{ code|raw }}
  246.                     </div>
  248.                     <pre class="example-code"><code>{{ code }}</code></pre>
  249.                 </div>
  251.                 <h3>Talla L</h3>
  253.                 {%
  254.                     set code = '<article class="ml-banner is-l">
  255.     <a href="" class="banner-link">
  256.         <div class="banner-content-wrapper">
  257.             <div class="banner-content">
  258.                 <h2 class="at-title">
  259.                     <span class="title-inner-wrapper">Banner L</span>
  260.                 </h2>
  261.                 <div class="at-text">
  262.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  263.                 </div>
  264.             </div>
  265.         </div>
  266.     </a>
  267. </article>
  269. <article class="ml-banner is-l has-media">
  270.     <a href="" class="banner-link">
  271.         <div class="banner-background-overlay" style="background-image: url(\'https://picsum.photos/720/521\');"></div>
  272.         <div class="banner-content-wrapper">
  273.             <div class="banner-content">
  274.                 <h2 class="at-title">
  275.                     <span class="title-inner-wrapper">Banner L</span>
  276.                 </h2>
  277.                 <div class="at-text">
  278.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  279.                 </div>
  280.             </div>
  281.         </div>
  282.     </a>
  283. </article>'
  284.                 %}
  286.                 <div class="org-example">
  287.                     <div class="example-display">
  288.                         {{ code|raw }}
  289.                     </div>
  291.                     <pre class="example-code"><code>{{ code }}</code></pre>
  292.                 </div>
  294.                 <h3>Talla XL</h3>
  296.                 {%
  297.                     set code = '<article class="ml-banner is-xl">
  298.     <a href="" class="banner-link">
  299.         <div class="banner-content-wrapper">
  300.             <div class="banner-content">
  301.                 <h2 class="at-title">
  302.                     <span class="title-inner-wrapper">Banner XL</span>
  303.                 </h2>
  304.                 <div class="at-text">
  305.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  306.                 </div>
  307.             </div>
  308.         </div>
  309.     </a>
  310. </article>
  312. <article class="ml-banner is-xl has-media">
  313.     <a href="" class="banner-link">
  314.         <div class="banner-background-overlay" style="background-image: url(\'https://picsum.photos/1180/427\');"></div>
  315.         <div class="banner-content-wrapper">
  316.             <div class="banner-content">
  317.                 <h2 class="at-title">
  318.                     <span class="title-inner-wrapper">Banner XL</span>
  319.                 </h2>
  320.                 <div class="at-text">
  321.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  322.                 </div>
  323.             </div>
  324.         </div>
  325.     </a>
  326. </article>
  328. <article class="ml-banner is-xl has-media has-filter">
  329.     <a href="" class="banner-link">
  330.         <div class="banner-background-overlay" style="background-image: url(\'https://picsum.photos/1180/427\');"></div>
  331.         <div class="banner-content-wrapper">
  332.             <div class="banner-content">
  333.                 <h2 class="at-title">
  334.                     <span class="title-inner-wrapper">Banner XL</span>
  335.                 </h2>
  336.                 <div class="at-text">
  337.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  338.                 </div>
  339.             </div>
  340.         </div>
  341.     </a>
  342. </article>
  344. <article class="ml-banner is-xl has-media has-video">
  345.     <div class="banner-background-overlay" style="background-image: url(\'https://picsum.photos/1180/427\');"></div>
  346.     <usc-youtube-player video-id="xpljv2ZCv3c"></usc-youtube-player>
  347.     <div class="banner-content-wrapper">
  348.         <div class="banner-content">
  349.             <h2 class="at-title">
  350.                 <span class="title-inner-wrapper">Banner XL</span>
  351.             </h2>
  352.             <div class="at-text">
  353.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  354.             </div>
  355.             <a href="https://www.youtube.com/watch?v=xpljv2ZCv3c" class="banner-link">
  356.                 <span class="is-sr-only">Abrir ligazón</span>
  357.             </a>
  358.         </div>
  359.     </div>
  360. </article>'
  361.                 %}
  363.                 <div class="org-example">
  364.                     <div class="example-display">
  365.                         {{ code|raw }}
  366.                     </div>
  368.                     <pre class="example-code"><code>{{ code }}</code></pre>
  369.                 </div>
  370.             </div>
  371.         </div>
  373.         <div class="org-content-block" id="buttons-list">
  374.             <div class="content-block-content-wrapper">
  375.                 <h2>Listas de botóns</h2>
  377.                 {%
  378.                     set code = '<ul class="ml-buttons-list">
  379.     <li><a href="" class="at-button is-tertiary at-icon-external-link">Ligazón</a></li>
  380.     <li><a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a></li>
  381. </ul>
  383. <ul class="ml-buttons-list is-vertical">
  384.     <li><a href="" class="at-button is-tertiary at-icon-external-link">Ligazón</a></li>
  385.     <li><a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a></li>
  386. </ul>'
  387.                 %}
  389.                 <div class="org-example">
  390.                     <div class="example-display">
  391.                         {{ code|raw }}
  392.                     </div>
  394.                     <pre class="example-code"><code>{{ code }}</code></pre>
  395.                 </div>
  396.             </div>
  397.         </div>
  399.         <div class="org-content-block" id="doughnut-charts">
  400.             <div class="content-block-content-wrapper">
  401.                 <h2>Gráficos tipo donut</h2>
  402.                 <p>Se un gráfico non ten que levar ligazón chega con non incluír a etiqueta <code>&lt;a&gt;</code> no marcado do compoñente.</p>
  404.                 {%
  405.                     set code = '<div class="ml-chart-doughnut">
  406.     <h3 class="at-title">
  407.         <a href="" class="chart-link">Título do dato</a>
  408.     </h3>
  409.     <div class="chart-canvas-wrapper">
  410.         <usc-chart-doughnut
  411.                 :chart-data="[2, 2, 6]"
  412.                 :chart-data-labels="[\'Graos\', \'Másteres\', \'Estudantes\']"
  413.                 :chart-data-colors="[\'#87a9c1\', \'#e1f4f1\', \'#000066\']" />
  414.     </div>
  415. </div>'
  416.                 %}
  418.                 <div class="org-example">
  419.                     <div class="example-display">
  420.                         {{ code|raw }}
  421.                     </div>
  423.                     <pre class="example-code"><code>{{ code }}</code></pre>
  424.                 </div>
  425.             </div>
  426.         </div>
  428.         <div class="org-content-block" id="events">
  429.             <aside class="content-block-attachments-wrapper">
  430.                 <div class="ml-alert is-attached">
  431.                     <h3 class="at-title">Modificadores de cor</h3>
  432.                     <div class="at-text">
  433.                         <p>Os eventos dispoñen das seguintes clases modificadoras de cor: <code>is-studies</code>, <code>is-admission</code>, <code>is-research</code> e <code>is-journal</code>.</p>
  434.                     </div>
  435.                 </div>
  436.             </aside>
  437.             <div class="content-block-content-wrapper">
  438.                 <h2>Eventos</h2>
  439.                 <p>Os eventos teñen un sistema de tallas e cores controlados a través de modificadores. O átomo coa data do evento é opcional.</p>
  441.                 <h3>Talla S</h3>
  443.                 {%
  444.                     set code = '<article class="ml-event is-s">
  445.     <div class="event-content-wrapper">
  446.         <div class="date-title-wrapper">
  447.             <time class="at-date" datetime="2019-04-01">01 abr</time>
  448.             <h2 class="at-title">
  449.                 <a href="">Sumario dun contido de axenda talla S</a>
  450.             </h2>
  451.         </div>
  452.     </div>
  453. </article>'
  454.                 %}
  456.                 <div class="org-example">
  457.                     <div class="example-display">
  458.                         {{ code|raw }}
  459.                     </div>
  461.                     <pre class="example-code"><code>{{ code }}</code></pre>
  462.                 </div>
  464.                 <h3>Talla M</h3>
  466.                 {%
  467.                     set code = '<article class="ml-event is-m">
  468.     <div class="event-content-wrapper">
  469.         <div class="date-title-wrapper">
  470.             <time datetime="2019-06-15" class="at-date">15 xuñ</time>
  471.             <h2 class="at-title">
  472.                 <a href="">Sumario dun contido de axenda talla M</a>
  473.             </h2>
  474.             <div class="at-text">
  475.                 <p>Conferencia de Marcela Lorcarno</p>
  476.             </div>
  477.             <div class="event-location">
  478.                 <p>Facultade de Ciencias da Comunicación</p>
  479.             </div>
  480.         </div>
  481.     </div>
  482. </article>
  484. <article class="ml-event is-m has-media">
  485.     <div class="event-media-wrapper">
  486.         <img src="https://picsum.photos/700/394" alt="">
  487.     </div>
  488.     <div class="event-content-wrapper">
  489.         <div class="date-title-wrapper">
  490.             <time datetime="2019-06-15" class="at-date">15 xuñ</time>
  491.             <h2 class="at-title">
  492.                 <a href="">Sumario dun contido de axenda talla M</a>
  493.             </h2>
  494.             <div class="at-text">
  495.                 <p>Conferencia de Marcela Lorcarno</p>
  496.             </div>
  497.             <div class="event-location">
  498.                 <p>Facultade de Ciencias da Comunicación</p>
  499.             </div>
  500.         </div>
  501.     </div>
  502. </article>'
  503.                 %}
  505.                 <div class="org-example">
  506.                     <div class="example-display">
  507.                         {{ code|raw }}
  508.                     </div>
  510.                     <pre class="example-code"><code>{{ code }}</code></pre>
  511.                 </div>
  512.             </div>
  513.         </div>
  515.         <div class="org-content-block" id="forms">
  516.             <div class="content-block-content-wrapper">
  517.                 <h2>Formularios</h2>
  518.                 <p>A cabeceira e os seus elementos son opcionais. Os formularios teñen unha clase modificadora <code>is-horizontal</code> para a súa visualización en horizontal.</p>
  520.                 {%
  521.                     set code = '<form class="ml-form">
  522.     <header class="form-header">
  523.         <h3 class="at-title">Que queres estudar?</h3>
  525.         <h4 class="form-header-legend">Título formulario</h4>
  527.         <p>Descrición do formulario</p>
  528.     </header>
  529.     <div class="form-content">
  530.         <!-- Campos do formulario -->
  532.         <div class="form-actions">
  533.             <button type="submit" class="at-button is-primary">Enviar</button>
  534.         </div>
  535.     </div>
  536. </form>'
  537.                 %}
  539.                 <div class="org-example">
  540.                     <div class="example-display">
  541.                         {{ code|raw }}
  542.                     </div>
  544.                     <pre class="example-code"><code>{{ code }}</code></pre>
  545.                 </div>
  546.             </div>
  547.         </div>
  549.         <div class="org-content-block" id="metrics">
  550.             <div class="content-block-content-wrapper">
  551.                 <h2>Datos</h2>
  552.                 <p>Os datos teñen un sistema de tallas controladas a través de modificadores. Se un dato non ten que levar ligazón chega con non incluír a etiqueta <code>&lt;a&gt;</code> no marcado do compoñente.</p>
  554.                 {%
  555.                     set code = '<div class="ml-metric is-m">
  556.     <h3 class="at-title">
  557.         <a href="" class="metric-link">100.000</a>
  558.     </h3>
  559.     <div class="at-text">
  560.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  561.     </div>
  562. </div>
  564. <div class="ml-metric is-l">
  565.     <h3 class="at-title">
  566.         <a href="" class="metric-link">100.000</a>
  567.     </h3>
  568.     <div class="at-text">
  569.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  570.     </div>
  571. </div>'
  572.                 %}
  574.                 <div class="org-example">
  575.                     <div class="example-display">
  576.                         {{ code|raw }}
  577.                     </div>
  579.                     <pre class="example-code"><code>{{ code }}</code></pre>
  580.                 </div>
  581.             </div>
  582.         </div>
  584.         <div class="org-content-block" id="news">
  585.             <aside class="content-block-attachments-wrapper">
  586.                 <div class="ml-alert is-attached">
  587.                     <h3 class="at-title">Modificadores de cor</h3>
  588.                     <div class="at-text">
  589.                         <p>As novas dispoñen das seguintes clases modificadoras de cor: <code>is-studies</code>, <code>is-admission</code>, <code>is-research</code> e <code>is-journal</code>.</p>
  590.                     </div>
  591.                 </div>
  592.             </aside>
  593.             <div class="content-block-content-wrapper">
  594.                 <h2>Novas</h2>
  595.                 <p>As novas teñen un sistema de tallas e cores controlados a través de modificadores.</p>
  597.                 <h3>Talla M</h3>
  599.                 {%
  600.                     set code = '<article class="ml-news is-m">
  601.     <div class="news-content-wrapper">
  602.         <ul class="ml-tags-list">
  603.             <li><a href="" class="at-tag is-primary">Tema</a></li>
  604.             <li><a href="" class="at-tag is-secondary">Xénero</a></li>
  605.         </ul>
  606.         <h2 class="at-title">
  607.             <a href="">Talla M</a>
  608.         </h2>
  609.         <div class="at-text">
  610.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  611.             <a href="" class="news-read-more">
  612.                 <span class="is-sr-only">Ler máis</span>
  613.             </a>
  614.         </div>
  615.     </div>
  616. </article>
  618. <article class="ml-news is-m has-media ">
  619.     <div class="news-media-wrapper">
  620.         <img src="https://picsum.photos/700/394" alt="">
  621.     </div>
  622.     <div class="news-content-wrapper">
  623.         <h2 class="at-title">
  624.             <a href="">Talla M</a>
  625.         </h2>
  626.         <div class="at-text">
  627.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
  628.             <a href="/nova" class="news-read-more">
  629.                 <span class="is-sr-only">Ler máis</span>
  630.             </a>
  631.         </div>
  632.     </div>
  633. </article>'
  634.                 %}
  636.                 <div class="org-example">
  637.                     <div class="example-display">
  638.                         {{ code|raw }}
  639.                     </div>
  641.                     <pre class="example-code"><code>{{ code }}</code></pre>
  642.                 </div>
  644.                 <h3>Talla L</h3>
  646.                 {%
  647.                     set code = '<article class="ml-news is-l" style="background-image: url(\'https://picsum.photos/720/521\');">
  648.     <div class="news-content-wrapper">
  649.         <ul class="ml-tags-list">
  650.             <li><a href="" class="at-tag is-primary">Tema</a></li>
  651.             <li><a href="" class="at-tag is-secondary">Xénero</a></li>
  652.         </ul>
  653.         <h2 class="at-title">
  654.             <a href="">Talla L</a>
  655.         </h2>
  656.         <div class="at-text">
  657.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  658.             <a href="" class="news-read-more">
  659.                 <span class="is-sr-only">Ler máis</span>
  660.             </a>
  661.         </div>
  662.     </div>
  663. </article>
  665. <article class="ml-news is-l is-institutional" style="background-image: url(\'https://picsum.photos/1189/263\');">
  666.     <div class="news-content-wrapper">
  667.         <ul class="ml-tags-list">
  668.             <li><a href="" class="at-tag is-primary">Tema</a></li>
  669.             <li><a href="" class="at-tag is-secondary">Xénero</a></li>
  670.         </ul>
  671.         <h2 class="at-title">
  672.             <a href="">Talla L institucional</a>
  673.         </h2>
  674.         <div class="at-text">
  675.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  676.             <a href="" class="news-read-more">
  677.                 <span class="is-sr-only">Ler máis</span>
  678.             </a>
  679.         </div>
  680.     </div>
  681. </article>'
  682.                 %}
  684.                 <div class="org-example">
  685.                     <div class="example-display">
  686.                         {{ code|raw }}
  687.                     </div>
  689.                     <pre class="example-code"><code>{{ code }}</code></pre>
  690.                 </div>
  692.                 <h3>Talla XL</h3>
  694.                 {%
  695.                     set code = '<article class="ml-news is-xl" style="background-image: url(\'https://picsum.photos/1180/427\');">
  696.     <div class="news-content-wrapper">
  697.         <ul class="ml-tags-list">
  698.             <li><a href="" class="at-tag is-primary">Tema</a></li>
  699.             <li><a href="" class="at-tag is-secondary">Xénero</a></li>
  700.         </ul>
  701.         <h2 class="at-title">
  702.             <a href="">Talla XL</a>
  703.         </h2>
  704.         <div class="at-text">
  705.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  706.             <a href="" class="news-read-more">
  707.                 <span class="is-sr-only">Ler máis</span>
  708.             </a>
  709.         </div>
  710.     </div>
  711. </article>'
  712.                 %}
  714.                 <div class="org-example">
  715.                     <div class="example-display">
  716.                         {{ code|raw }}
  717.                     </div>
  719.                     <pre class="example-code"><code>{{ code }}</code></pre>
  720.                 </div>
  721.             </div>
  722.         </div>
  724.         <div class="org-content-block" id="notices">
  725.             <div class="content-block-content-wrapper">
  726.                 <h2>Anuncios</h2>
  727.                 <p>A lista de descrición e a lista de etiquetas dun anuncio son opcionais.</p>
  729.                 {%
  730.                     set code = '<article class="ml-notice">
  731.     <div class="notice-content-wrapper">
  732.         <h2 class="at-title">
  733.             <a href="">Anuncio</a>
  734.         </h2>
  735.         <div class="at-text">
  736.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  737.         </div>
  738.         <a href="" class="notice-author">persoa@usc.es</a>
  739.         <dl class="at-desc-list">
  740.             <dt>Item 1</dt>
  741.             <dd>Lorem ipsum</dd>
  742.             <dt>Item 2</dt>
  743.             <dd>Lorem ipsum</dd>
  744.         </dl>
  745.         <ul class="ml-tags-list">
  746.             <li><a href="" class="at-tag is-primary">Tema</a></li>
  747.             <li><a href="" class="at-tag is-primary">Xénero</a></li>
  748.         </ul>
  749.     </div>
  750. </article>
  752. <article class="ml-notice is-attached">
  753.     <div class="notice-content-wrapper">
  754.         <h2 class="at-title">
  755.             <a href="">Anuncio</a>
  756.         </h2>
  757.         <div class="at-text">
  758.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  759.         </div>
  760.         <a href="" class="notice-author">persoa@usc.es</a>
  761.     </div>
  762. </article>'
  763.                 %}
  765.                 <div class="org-example">
  766.                     <div class="example-display">
  767.                         {{ code|raw }}
  768.                     </div>
  770.                     <pre class="example-code"><code>{{ code }}</code></pre>
  771.                 </div>
  772.             </div>
  773.         </div>
  775.         <div class="org-content-block" id="page-header">
  776.             <div class="content-block-content-wrapper">
  777.                 <h2>Cabeceira de páxina</h2>
  778.                 <p>A cabeceira de páxina é un compoñente Vue.js. As migas de pan, o antetítulo, o título, as etiquetas e o submenú son opcionais.</p>
  780.                 {%
  781.                     set code = '<usc-page-header
  782.     :has-title="true"
  783. >
  784.     <template v-slot:breadcrumb>
  785.         <ol class="at-breadcrumb">
  786.             <li class="breadcrumb-item"><a href="">Nivel 2</a></li>
  787.             <li class="breadcrumb-item"><a href="">Nivel 3</a></li>
  788.         </ol>
  789.     </template>
  791.     <template v-slot:pretitle>
  792.         <p class="at-title is-pretitle">Antetítulo da páxina</p>
  793.     </template>
  795.     <h1 class="at-title">Título da páxina</h1>
  797.     <template v-slot:tags>
  798.         <ul class="ml-tags-list">
  799.             <li>
  800.                 <span class="at-tag is-primary">Etiqueta 1</span>
  801.                 <a href="" class="at-tag is-secondary">Etiqueta 2</a>
  802.             </li>
  803.         </ul>
  804.     </template>
  806.     <template v-slot:submenu>
  807.         <li class="submenu-item"><a href="">Submenú 1</a></li>
  808.         <li class="submenu-item"><a href="">Submenú 2</a></li>
  809.     </template>
  810. </usc-page-header>'
  811.                 %}
  813.                 <div class="org-example">
  814.                     <div class="example-display">
  815.                         {{ code|raw }}
  816.                     </div>
  818.                     <pre class="example-code"><code>{{ code }}</code></pre>
  819.                 </div>
  820.             </div>
  821.         </div>
  823.         <div class="org-content-block" id="pagination">
  824.             <div class="content-block-content-wrapper">
  825.                 <h2>Paxinación</h2>
  827.                 {%
  828.                     set code = '<nav class="ml-pagination">
  829.     <ul class="pagination-list">
  830.         <li class="pagination-list-item">
  831.             <span class="at-button is-first is-current">
  832.                 <span class="is-sr-only">Primeira páxina</span>
  833.             </span>
  834.         </li>
  835.         <li class="pagination-list-item">
  836.             <span class="at-button is-previous is-current">
  837.                 <span class="is-sr-only">Páxina anterior</span>
  838.             </span>
  839.         </li>
  840.         <li class="pagination-list-item">
  841.             <span class="at-button is-current">
  842.                 1
  843.             </span>
  844.         </li>
  845.         <li class="pagination-list-item">
  846.             <a href="" class="at-button">
  847.                 2
  848.             </a>
  849.         </li>
  850.         <li class="pagination-list-item">
  851.             <span class="at-button">
  852.                 ...
  853.             </span>
  854.         </li>
  855.         <li class="pagination-list-item">
  856.             <a href="" class="at-button">
  857.                 5
  858.             </a>
  859.         </li>
  860.         <li class="pagination-list-item">
  861.             <a href="" class="at-button is-next">
  862.                 <span class="is-sr-only">Páxina seguinte</span>
  863.             </a>
  864.         </li>
  865.         <li class="pagination-list-item">
  866.             <a href="" class="at-button is-last">
  867.                 <span class="is-sr-only">Última páxina</span>
  868.             </a>
  869.         </li>
  870.     </ul>
  871. </nav>'
  872.                 %}
  874.                 <div class="org-example">
  875.                     <div class="example-display">
  876.                         {{ code|raw }}
  877.                     </div>
  879.                     <pre class="example-code"><code>{{ code }}</code></pre>
  880.                 </div>
  881.             </div>
  882.         </div>
  884.         <div class="org-content-block" id="search-results">
  885.             <div class="content-block-content-wrapper">
  886.                 <h2>Resultados de busca</h2>
  888.                 {%
  889.                     set code = '<article class="ml-search-result">
  890.     <div class="search-result-content-wrapper">
  891.         <h2 class="at-title">
  892.             <a href="">Título do contido que coincide coa busca realizada</a>
  893.         </h2>
  894.         <div class="at-text">
  895.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
  896.         </div>
  897.     </div>
  898. </article>'
  899.                 %}
  901.                 <div class="org-example">
  902.                     <div class="example-display">
  903.                         {{ code|raw }}
  904.                     </div>
  906.                     <pre class="example-code"><code>{{ code }}</code></pre>
  907.                 </div>
  908.             </div>
  909.         </div>
  911.         <div class="org-content-block" id="specs">
  912.             <div class="content-block-content-wrapper">
  913.                 <h2>Fichas técnicas</h2>
  915.                 {%
  916.                     set code = '<div class="ml-specs">
  917.     <h2 class="at-title">Ficha técnica</h2>
  919.     <dl class="at-desc-list">
  920.         <dt>Item 1</dt>
  921.         <dd>Lorem ipsum</dd>
  922.         <dt>Item 2</dt>
  923.         <dd>Lorem ipsum</dd>
  924.         <dt>Item 3</dt>
  925.         <dd>Lorem ipsum dolor</dd>
  926.         <dt>Item 4</dt>
  927.         <dd>Lorem ipsum dolor sit</dd>
  928.         <dt>Item 5</dt>
  929.         <dd>Consectetur 
Adipiscing</dd>
  930.     </dl>
  931. </div>'
  932.                 %}
  934.                 <div class="org-example">
  935.                     <div class="example-display">
  936.                         {{ code|raw }}
  937.                     </div>
  939.                     <pre class="example-code"><code>{{ code }}</code></pre>
  940.                 </div>
  941.             </div>
  942.         </div>
  944.         <div class="org-content-block" id="tables">
  945.             <div class="content-block-content-wrapper">
  946.                 <h2>Táboas</h2>
  948.                 {%
  949.                     set code = '<table class="ml-table">
  950.     <thead>
  951.         <tr>
  952.             <th>Código</th>
  953.             <th>Nome</th>
  954.             <th>Créditos</th>
  955.             <th>Programa</th>
  956.         </tr>
  957.     </thead>
  958.     <tbody>
  959.         <tr>
  960.             <td>G3041101</td>
  961.             <td>Identidade cultural e sociedade da información</td>
  962.             <td>6.00</td>
  963.             <td><a href="">Descargar<a/></td>
  964.         </tr>
  966.         <tr>
  967.             <td>G3041103</td>
  968.             <td>Fundamentos de economía da información</td>
  969.             <td>6.00</td>
  970.             <td><a href="">Descargar<a/></td>
  971.         </tr>
  973.         <tr>
  974.             <td>G3041104</td>
  975.             <td>Institucións políticas e movementos sociais</td>
  976.             <td>6.00</td>
  977.             <td><a href="">Descargar<a/></td>
  978.         </tr>
  979.     </tbody>
  980. </table>'
  981.                 %}
  983.                 <div class="org-example">
  984.                     <div class="example-display">
  985.                         {{ code|raw }}
  986.                     </div>
  988.                     <pre class="example-code"><code>{{ code }}</code></pre>
  989.                 </div>
  990.             </div>
  991.         </div>
  993.         <div class="org-content-block" id="tags-lists">
  994.             <div class="content-block-content-wrapper">
  995.                 <h2>Listas de etiquetas</h2>
  997.                 {%
  998.                     set code = '<ul class="ml-tags-list">
  999.     <li>
  1000.         <a href="" class="at-tag is-primary">Tema</a>
  1001.     </li>
  1002.     <li>
  1003.         <a href="" class="at-tag is-secondary">Xénero</a>
  1004.     </li>
  1005. </ul>'
  1006.                 %}
  1008.                 <div class="org-example">
  1009.                     <div class="example-display">
  1010.                         {{ code|raw }}
  1011.                     </div>
  1013.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1014.                 </div>
  1015.             </div>
  1016.         </div>
  1018.         <div class="org-content-block" id="version-info">
  1019.             <div class="content-block-content-wrapper">
  1020.                 <h2>Información de actualización</h2>
  1022.                 {%
  1023.                     set code = '<div class="ml-version-info">
  1024.     <div class="version-info-content">
  1025.         <p>Os contidos desta páxina foron actualizados o 26/07/2019.</p>
  1026.     </div>
  1027. </div>'
  1028.                 %}
  1030.                 <div class="org-example">
  1031.                     <div class="example-display">
  1032.                         {{ code|raw }}
  1033.                     </div>
  1035.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1036.                 </div>
  1037.             </div>
  1038.         </div>
  1040.         <div class="org-content-block" id="carousel">
  1041.             <div class="content-block-content-wrapper">
  1042.                 <h2>Carrusel de imaxes</h2>
  1044.                 {%
  1045.                     set code = '<usc-carousel>
  1046.     <usc-carousel-item>
  1047.         <figure class="at-image">
  1048.             <img src="https://picsum.photos/800/507" alt="">
  1049.             <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1050.         </figure>
  1051.     </usc-carousel-item>
  1052.     <usc-carousel-item>
  1053.         <figure class="at-image">
  1054.             <img src="https://picsum.photos/800/507" alt="">
  1055.             <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1056.         </figure>
  1057.     </usc-carousel-item>
  1058.     <usc-carousel-item>
  1059.         <figure class="at-image">
  1060.             <img src="https://picsum.photos/800/507" alt="">
  1061.             <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1062.         </figure>
  1063.     </usc-carousel-item>
  1064. </usc-carousel>'
  1065.                 %}
  1067.                 <div class="org-example">
  1068.                     <div class="example-display">
  1069.                         {{ code|raw }}
  1070.                     </div>
  1072.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1073.                 </div>
  1075.                 <p>Se queremos que o carrusel de imaxes se poida ver a pantalla completa, é preciso modificar lixeiramente o seu marcado.</p>
  1077.                 {%
  1078.                     set code = '<usc-carousel>
  1079.     <template slot-scope="carouselSlotProps">
  1080.         <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
  1081.             <template slot-scope="itemSlotProps">
  1082.                 <figure class="at-image">
  1083.                     <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
  1084.                         <img src="https://picsum.photos/800/507" alt="">
  1085.                     </a>
  1086.                     <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1087.                 </figure>
  1088.             </template>
  1089.         </usc-carousel-item>
  1090.         <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
  1091.             <template slot-scope="itemSlotProps">
  1092.                 <figure class="at-image">
  1093.                     <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
  1094.                         <img src="https://picsum.photos/800/507" alt="">
  1095.                     </a>
  1096.                     <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1097.                 </figure>
  1098.             </template>
  1099.         </usc-carousel-item>
  1100.         <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
  1101.             <template slot-scope="itemSlotProps">
  1102.                 <figure class="at-image">
  1103.                     <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
  1104.                         <img src="https://picsum.photos/800/507" alt="">
  1105.                     </a>
  1106.                     <figcaption class="image-caption">Descrición da imaxe</figcaption>
  1107.                 </figure>
  1108.             </template>
  1109.         </usc-carousel-item>
  1110.     </template>
  1111. </usc-carousel>'
  1112.                 %}
  1114.                 <div class="org-example">
  1115.                     <div class="example-display">
  1116.                         {{ code|raw }}
  1117.                     </div>
  1119.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1120.                 </div>
  1121.             </div>
  1122.         </div>
  1124.         <div class="org-content-block" id="filters-group">
  1125.             <div class="content-block-content-wrapper">
  1126.                 <h2>Grupo de filtros</h2>
  1128.                 {%
  1129.                     set code = '<div class="ml-filters-group">
  1130.     <usc-text-filter></usc-text-filter>
  1132.     <usc-dropdown-filter>
  1133.         <template v-slot:default>
  1134.             <li>
  1135.                 <a href="">Filtro 1</a>
  1136.             </li>
  1137.             <li>
  1138.                 <a href="">Filtro 2</a>
  1139.             </li>
  1140.         </template>
  1141.     </usc-dropdown-filter>
  1142. </div>'
  1143.                 %}
  1145.                 <div class="org-example">
  1146.                     <div class="example-display">
  1147.                         {{ code|raw }}
  1148.                     </div>
  1150.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1151.                 </div>
  1152.             </div>
  1153.         </div>
  1155.         <div class="org-content-block" id="generic-summary">
  1156.             <div class="content-block-content-wrapper">
  1157.                 <h2>Sumario xeral</h2>
  1159.                 {%
  1160.                     set code = '<article class="ml-generic-summary">
  1161.     <i class="generic-summary-icon at-icon-paperclip"></i>
  1162.     <div class="generic-summary-content-wrapper">
  1163.         <h3 class="at-title">
  1164.             <a href="">Título do sumario</a>
  1165.         </h3>
  1166.         <div class="at-text">
  1167.             <p>Descrición do sumario</p>
  1168.         </div>
  1169.     </div>
  1170. </article>'
  1171.                 %}
  1173.                 <div class="org-example">
  1174.                     <div class="example-display">
  1175.                         {{ code|raw }}
  1176.                     </div>
  1178.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1179.                 </div>
  1180.             </div>
  1181.         </div>
  1183.         <div class="org-content-block" id="academic-subject">
  1184.             <div class="content-block-content-wrapper">
  1185.                 <h2>Asignatura</h2>
  1187.                 {%
  1188.                     set code = '<article class="ml-academic-subject">
  1189.     <h3 class="at-title">
  1190.         <a href="">Nome da asignatura</a>
  1191.     </h3>
  1192.     <ul class="academic-subject-specs-list">
  1193.         <li>0000-XXXX</li>
  1194.         <li>Carácter obrigatorio</li>
  1195.         <li>1SG</li>
  1196.         <li>6 Créditos</li>
  1197.         <li>Docencia Oferta 1</li>
  1198.     </ul>
  1199. </article>'
  1200.                 %}
  1202.                 <div class="org-example">
  1203.                     <div class="example-display">
  1204.                         {{ code|raw }}
  1205.                     </div>
  1207.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1208.                 </div>
  1209.             </div>
  1210.         </div>
  1212.         <div class="org-content-block" id="members">
  1213.             <div class="content-block-content-wrapper">
  1214.                 <h2>Persoal da universidade</h2>
  1216.                 {%
  1217.                     set code = '<article class="ml-member">
  1218.     <div class="member-content-wrapper">
  1219.         <h3 class="at-title">Nome do profesor/a</h3>
  1220.         <span class="member-identifier">Coordinadora</span>
  1222.         <dl class="at-desc-list">
  1223.             <dt>Departamento</dt>
  1224.             <dd>Bioquímica e Bioloxía</dd>
  1225.             <dt>Área</dt>
  1226.             <dd>Área</dd>
  1227.             <dt>Teléfono</dt>
  1228.             <dd>
  1229.                 <a href="">881 811 000 ext. 12211</a>
  1230.             </dd>
  1231.             <dt>Correo electrónico</dt>
  1232.             <dd>
  1233.                 <a href="">info@espazo.gal</a>
  1234.             </dd>
  1235.             <dt>Categoría</dt>
  1236.             <dd>Profesor/a: Catedrático/a de Universidade</dd>
  1237.         </dl>
  1238.     </div>
  1239. </article>
  1241. <article class="ml-member has-position">
  1242.     <div class="member-content-wrapper">
  1243.         <span class="member-position">Cargo</span>
  1244.         <h3 class="at-title">Nome Apelido Apelido</h3>
  1245.         <span class="member-identifier">Identificador da persoa</span>
  1247.         <dl class="at-desc-list">
  1248.             <dt>Teléfonos</dt>
  1249.             <dd>
  1250.                 <a href="">981 560 250</a><br />
  1251.                 <a href="">881 956 418</a>
  1252.             </dd>
  1253.             <dt>Email</dt>
  1254.             <dd>
  1255.                 <a href="">info@espazo.gal</a>
  1256.             </dd>
  1257.         </dl>
  1258.     </div>
  1259. </article>
  1261. <article class="ml-member has-position has-media">
  1262.     <div class="member-media-wrapper">
  1263.         <img src="https://picsum.photos/700/469" alt="">
  1264.     </div>
  1266.     <div class="member-content-wrapper">
  1267.         <span class="member-position">Cargo</span>
  1268.         <h3 class="at-title">Nome Apelido Apelido</h3>
  1269.         <span class="member-identifier">Identificador da persoa</span>
  1271.         <dl class="at-desc-list">
  1272.             <dt>Teléfonos</dt>
  1273.             <dd>
  1274.                 <a href="">981 560 250</a><br />
  1275.                 <a href="">881 956 418</a>
  1276.             </dd>
  1277.             <dt>Email</dt>
  1278.             <dd>
  1279.                 <a href="">info@espazo.gal</a>
  1280.             </dd>
  1281.         </dl>
  1282.     </div>
  1283. </article>'
  1284.                 %}
  1286.                 <div class="org-example">
  1287.                     <div class="example-display">
  1288.                         {{ code|raw }}
  1289.                     </div>
  1291.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1292.                 </div>
  1293.             </div>
  1294.         </div>
  1296.         <div class="org-content-block" id="tooltip">
  1297.             <div class="content-block-content-wrapper">
  1298.                 <h2>Descrición emerxente (tooltip)</h2>
  1300.                 {%
  1301.                     set code = '<usc-tooltip>
  1302.     <template v-slot:trigger="props">
  1303.         <button class="at-button is-mini at-icon-info tooltip-trigger" @click="props.toggle">
  1304.             <span class="is-sr-only">Info</span>
  1305.         </button>
  1306.     </template>
  1308.     <p>Un contido de exemplo</p>
  1310.     <div class="tooltip-important">
  1311.         <p>Contido importante da descrición emerxente</p>
  1312.     </div>
  1313. </usc-tooltip>'
  1314.                 %}
  1316.                 <div class="org-example">
  1317.                     <div class="example-display">
  1318.                         {{ code|raw }}
  1319.                     </div>
  1321.                     <pre class="example-code"><code>{{ code }}</code></pre>
  1322.                 </div>
  1323.             </div>
  1324.         </div>
  1325.     </div>
  1326. </article>
  1327. {% endblock %}