templates/templates/styleguide/color-typography.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 %}pg-color-typography{% 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: 'Cores e tipografías'
  17.     } %}
  18. {% endblock %}
  20. {% block pageContent %}
  21.     <div class="row">
  22.         <div class="col-lg-6">
  23.             <section class="org-tier">
  24.                 <div class="tier-header">
  25.                     <h2 class="tier-title">Serif</h2>
  26.                 </div>
  27.                 <div class="tier-content">
  28.                     <h1 class="at-title is-1">H1: Lorem ipsum dolor sit amet, consectetur adipiscing</h1>
  29.                     <h2 class="at-title is-2">H2: Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
  30.                     <h3 class="at-title is-3">H3: Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
  32.                     <h1 class="at-title is-1 is-light">H1-Light: Lorem ipsum dolor sit amet, consectetur adipiscing</h1>
  33.                     <h2 class="at-title is-2 is-light">H2-Light: Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
  34.                     <h3 class="at-title is-3">H3: Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
  35.                     <h3 class="at-title is-3">H3-Light: Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
  37.                     <div class="at-lead-text">
  38.                         <p>Lead: Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.</p>
  39.                     </div>
  40.                     <div>
  41.                         <p>Body: 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>
  42.                     </div>
  44.                     <h4 class="at-title is-4">H4: Lorem ipsum dolor sit amet, consectetur adipiscing elit donec viverra eros quis</h4>
  46.                     <div>
  47.                         <p>Body: 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>
  48.                     </div>
  50.                     <div class="row">
  51.                         <div class="col-lg-6">
  52.                             <h6 class="at-title is-6 is-sans">H6: Lorem ipsum dolor sit amet, consectetur adipiscing elit donec viverra eros quis</h6>
  53.                         </div>
  55.                         <div class="col-lg-6">
  56.                             <small class="at-small">Small text: Lorem ipsum dolor sit amet, consectetur adipiscing elit donec viverra eros quis</small>
  57.                         </div>
  58.                     </div>
  59.                 </div>
  60.             </section>
  61.         </div>
  62.         <div class="col-lg-6">
  63.             <section class="org-tier">
  64.                 <div class="tier-header">
  65.                     <h2 class="tier-title">Sans Serif</h2>
  66.                 </div>
  67.                 <div class="tier-content">
  68.                     <div class="sans-serif">
  69.                         <h1 class="at-title is-1 is-sans">H1: Lorem ipsum dolor sit amet, consectetur adipiscing</h1>
  70.                         <h2 class="at-title is-2 is-sans">H2: Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
  71.                         <h3 class="at-title is-3 is-sans">H3: Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
  72.                         <h4 class="at-title is-4 is-sans">H4: Lorem ipsum dolor sit amet, consectetur adipiscing</h4>
  73.                         <h4 class="at-title is-subhead">H4: Lorem ipsum dolor sit amet, consectetur adipiscing</h4>
  74.                     </div>
  75.                 </div>
  76.             </section>
  78.             <section class="org-tier">
  79.                 <div class="tier-header">
  80.                     <h2 class="tier-title">Cores</h2>
  81.                 </div>
  82.                 <div class="tier-content">
  83.                     <div class="row">
  84.                         <div class="col-sm-4">
  85.                             <div class="color-box black">
  86.                                 <p>Negro</p>
  87.                             </div>
  88.                         </div>
  89.                     </div>
  91.                     <div class="row">
  92.                         <div class="col-sm-4">
  93.                             <div class="color-box primary">
  94.                                 <p>Primario corporativo</p>
  95.                             </div>
  96.                         </div>
  97.                         <div class="col-sm-4">
  98.                             <div class="color-box primary-light">
  99.                                 <p>Primario 20</p>
  100.                             </div>
  101.                         </div>
  102.                         <div class="col-sm-4">
  103.                             <div class="color-box secondary">
  104.                                 <p>Secundario</p>
  105.                             </div>
  106.                         </div>
  107.                     </div>
  109.                     <div class="row">
  110.                         <div class="col-sm-4">
  111.                             <div class="color-box studies">
  112.                                 <p>Estudos</p>
  113.                             </div>
  114.                         </div>
  115.                         <div class="col-sm-4">
  116.                             <div class="color-box studies-light">
  117.                                 <p>Estudos light</p>
  118.                             </div>
  119.                         </div>
  120.                         <div class="col-sm-4">
  121.                             <div class="color-box studies-secondary">
  122.                                 <p>Estudos secundario</p>
  123.                             </div>
  124.                         </div>
  125.                     </div>
  127.                     <div class="row">
  128.                         <div class="col-sm-4">
  129.                             <div class="color-box admission">
  130.                                 <p>Admisión</p>
  131.                             </div>
  132.                         </div>
  133.                         <div class="col-sm-4">
  134.                             <div class="color-box admission-light">
  135.                                 <p>Admisión light</p>
  136.                             </div>
  137.                         </div>
  138.                         <div class="col-sm-4">
  139.                             <div class="color-box admission-secondary">
  140.                                 <p>Admisión secundario</p>
  141.                             </div>
  142.                         </div>
  143.                     </div>
  145.                     <div class="row">
  146.                         <div class="col-sm-4">
  147.                             <div class="color-box research">
  148.                                 <p>Investigación</p>
  149.                             </div>
  150.                         </div>
  151.                         <div class="col-sm-4">
  152.                             <div class="color-box research-light">
  153.                                 <p>Investigación light</p>
  154.                             </div>
  155.                         </div>
  156.                         <div class="col-sm-4">
  157.                             <div class="color-box research-secondary">
  158.                                 <p>Investigación secundario</p>
  159.                             </div>
  160.                         </div>
  161.                     </div>
  163.                     <div class="row">
  164.                         <div class="col-sm-4">
  165.                             <div class="color-box journal">
  166.                                 <p>Xornal</p>
  167.                             </div>
  168.                         </div>
  169.                         <div class="col-sm-4">
  170.                             <div class="color-box journal-light">
  171.                                 <p>Xornal</p>
  172.                             </div>
  173.                         </div>
  174.                         <div class="col-sm-4">
  175.                             <div class="color-box journal-alt">
  176.                                 <p>Xornal alt</p>
  177.                             </div>
  178.                         </div>
  179.                         <div class="col-sm-4">
  180.                             <div class="color-box journal-alt-dark">
  181.                                 <p>Xornal alt escuro</p>
  182.                             </div>
  183.                         </div>
  184.                     </div>
  186.                     <div class="row">
  187.                         <div class="col-sm-4">
  188.                             <div class="color-box gray">
  189.                                 <p>Gris</p>
  190.                             </div>
  191.                         </div>
  192.                         <div class="col-sm-4">
  193.                             <div class="color-box gray-20">
  194.                                 <p>Gris 20</p>
  195.                             </div>
  196.                         </div>
  197.                         <div class="col-sm-4">
  198.                             <div class="color-box gray-10">
  199.                                 <p>Gris 10</p>
  200.                             </div>
  201.                         </div>
  202.                     </div>
  204.                     <div class="row">
  205.                         <div class="col-sm-4">
  206.                             <div class="color-box error">
  207.                                 <p>Erro</p>
  208.                             </div>
  209.                         </div>
  210.                         <div class="col-sm-4">
  211.                             <div class="color-box error-light">
  212.                                 <p>Erro claro</p>
  213.                             </div>
  214.                         </div>
  215.                     </div>
  216.                 </div>
  217.             </section>
  218.         </div>
  219.     </div>
  220. {% endblock %}