<article class="Prose u-layout-prose">

    <h1>Velit irure ad cillum Lorem consequat magna magna pariatur.</h1>

    <h2>Velit irure ad cillum Lorem consequat magna magna pariatur.</h2>

    <h3>Velit irure ad cillum Lorem consequat magna magna pariatur.</h3>

    <h4>Velit irure ad cillum Lorem consequat magna magna pariatur.</h4>

    <h5>Velit irure ad cillum Lorem consequat magna magna pariatur.</h5>

    <h6>Velit irure ad cillum Lorem consequat magna magna pariatur.</h6>

    <h2 class="u-text-h2">Paragafo</h2>

    <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Delectus non est dolore omnis dolorem. Dolor non saepe in minus sit provident cupiditate blanditiis. Libero explicabo magnam sequi molestias quos. Consequatur modi et facere aut repudiandae omnis.</p>

    <h2 class="u-text-h2">Testo preformattato</h2>

    <pre class="u-textPreformatted u-textOverflow">
  <code class="u-text-r-xxs">
    Delectus non est dolore omnis dolorem. Dolor non saepe in minus sit provident cupiditate blanditiis. Libero explicabo magnam sequi molestias quos. Consequatur modi et facere aut repudiandae omnis.
  </code>
</pre>

    <h2 class="u-text-h2">Citazione</h2>

    <blockquote class="Prose-blockquote">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.</p>

    </blockquote>

    <h2 class="u-text-h2">Liste</h2>

    <ul>

        <li>Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.</li>

        <li>Consequatur eligendi sit similique est est voluptatem labore consequatur sit.</li>

        <li>Mollitia enim molestias dignissimos.</li>

        <li>Possimus quo repellendus quasi earum quos a.</li>

        <li>Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.</li>

        <li>Et sit iure et iste et qui et.</li>

        <li>Perferendis eaque quas ipsa.</li>

        <li>Quod facere ab.</li>

        <li>Aut et debitis quas doloremque et et illum.</li>

    </ul>

    <ol>

        <li>Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.</li>

        <li>Consequatur eligendi sit similique est est voluptatem labore consequatur sit.</li>

        <li>Mollitia enim molestias dignissimos.</li>

        <li>Possimus quo repellendus quasi earum quos a.</li>

        <li>Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.</li>

        <li>Et sit iure et iste et qui et.</li>

        <li>Perferendis eaque quas ipsa.</li>

        <li>Quod facere ab.</li>

        <li>Aut et debitis quas doloremque et et illum.</li>

    </ol>

</article>
  • Content:
    /** @define Prose; weak; */
    
    :root {
      --Prose-color-text-primary: #1c2024;
      --Prose-color-text-secondary: #5a6772;
      --Prose-color-text-highlighted: #b2ebed;
      --Prose-color-link: #06c;
      --Prose-color-link-hover: #036;
      --Prose-color-link-visited: #06c;
    }
    
    .Prose > p,
    .Prose > pre
    .Prose > figure {
      @extend .u-margin-bottom-xl;
    }
    
    .Prose,
    .Prose > p,
    .Prose > ul > li,
    .Prose > ol > li {
      @extend .u-text-r-xs;
      @extend .u-lineHeight-xl;
    
      color: var(--Prose-color-text-primary);
    }
    
    .Prose > p > small {
      @extend .u-text-r-xxs;
    }
    
    .Prose > a,
    .Prose p > a {
      @extend .u-text-r-xs;
      @extend .u-lineHeight-xl;
    
      color: var(--Prose-color-link);
    }
    
    .Prose {
      color: var(--Prose-color-text-primary);
    }
    
    .Prose--secondary {
      color: var(--Prose-color-text-secondary);
    }
    
    .Prose-blockquote {
      @extend .u-border-left-m;
      @extend .u-padding-left-l;
      @extend .u-margin-bottom-xl;
    }
    
    .Prose-blockquote > p {
      @extend .u-text-r-m;
      @extend .u-textItalic;
      @extend .u-textSecondary;
    }
    
    .Prose > p > a:hover {
      color: var(--Prose-color-link-hover);
    }
    
    .Prose > p > a:visited {
      color: var(--Prose-color-link-visited);
    }
    
    .Prose > ul,
    .Prose > ol {
      @extend .u-margin-bottom-xl;
      @extend .u-margin-left-xl;
    
      list-style-position: outside;
    }
    
    .Prose > ul {
      list-style-type: square;
    }
    
    .Prose > ol {
      list-style-type: decimal;
    }
    
    .Prose > ul > li,
    .Prose > ol > li {
      @extend .u-padding-top-xxs;
      @extend .u-padding-bottom-xxs;
    }
    
    .Prose > h1 {
      @extend .u-text-h1;
    }
    
    .Prose > h2 {
      @extend .u-text-h2;
    }
    
    .Prose > h3 {
      @extend .u-text-h3;
    }
    
    .Prose > h4 {
      @extend .u-text-h4;
    }
    
    .Prose > h5 {
      @extend .u-text-h5;
    }
    
    .Prose > h6 {
      @extend .u-text-h6;
    }
    
  • URL: /components/raw/prose/index.css
  • Filesystem Path: src/modules/prose/index.css
  • Size: 1.7 KB

There are no notes for this item.