<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">Atque libero perspiciatis hic. Aliquid ab minima libero excepturi minima qui. Ratione labore molestias veritatis aut voluptatibus nihil voluptatibus porro et. Eos et temporibus doloremque omnis expedita aut hic enim. Vero ut voluptatem exercitationem
        odit voluptas ut aut.</p>

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

    <pre class="u-textPreformatted u-textOverflow">
  <code class="u-text-r-xxs">
    Atque libero perspiciatis hic. Aliquid ab minima libero excepturi minima qui. Ratione labore molestias veritatis aut voluptatibus nihil voluptatibus porro et. Eos et temporibus doloremque omnis expedita aut hic enim. Vero ut voluptatem exercitationem odit voluptas ut aut.
  </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">Eaque porro quisquam.</p>

    </blockquote>

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

    <ul>

        <li>Eaque porro quisquam.</li>

        <li>Fugiat aut eaque molestias.</li>

        <li>Ullam doloribus rerum.</li>

        <li>Porro fugit voluptas.</li>

        <li>Et tenetur modi molestiae.</li>

        <li>Commodi nulla sed rerum dolorem qui.</li>

        <li>Quia vel deleniti laboriosam.</li>

        <li>Omnis temporibus ex autem nihil distinctio vitae.</li>

        <li>Aspernatur ad id sunt aut aut dolor id pariatur.</li>

    </ul>

    <ol>

        <li>Eaque porro quisquam.</li>

        <li>Fugiat aut eaque molestias.</li>

        <li>Ullam doloribus rerum.</li>

        <li>Porro fugit voluptas.</li>

        <li>Et tenetur modi molestiae.</li>

        <li>Commodi nulla sed rerum dolorem qui.</li>

        <li>Quia vel deleniti laboriosam.</li>

        <li>Omnis temporibus ex autem nihil distinctio vitae.</li>

        <li>Aspernatur ad id sunt aut aut dolor id pariatur.</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/components/prose/index.css
  • Size: 1.7 KB

There are no notes for this item.