<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">Ex omnis rerum saepe quibusdam facilis rerum. Officiis perspiciatis est rerum harum consequatur et debitis molestiae illum. Aut omnis tenetur sed repellendus autem eos. Qui sed vitae aut explicabo et ad sit. Qui consequatur sunt. Iusto ad officiis
        sunt.</p>

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

    <pre class="u-textPreformatted u-textOverflow">
  <code class="u-text-r-xxs">
    Ex omnis rerum saepe quibusdam facilis rerum. Officiis perspiciatis est rerum harum consequatur et debitis molestiae illum. Aut omnis tenetur sed repellendus autem eos. Qui sed vitae aut explicabo et ad sit. Qui consequatur sunt. Iusto ad officiis sunt.
  </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">Tempore voluptatem ut aut.</p>

    </blockquote>

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

    <ul>

        <li>Tempore voluptatem ut aut.</li>

        <li>A architecto qui et veritatis.</li>

        <li>Sequi quo rerum velit saepe.</li>

        <li>Rerum est laborum quis distinctio.</li>

        <li>Praesentium beatae totam iste atque sit quae.</li>

        <li>Dolores et itaque voluptas quas laudantium molestias.</li>

        <li>Aut exercitationem magni minus eum temporibus.</li>

        <li>Officiis dolores dolore.</li>

        <li>Iusto inventore asperiores deserunt eum est ut dolores.</li>

    </ul>

    <ol>

        <li>Tempore voluptatem ut aut.</li>

        <li>A architecto qui et veritatis.</li>

        <li>Sequi quo rerum velit saepe.</li>

        <li>Rerum est laborum quis distinctio.</li>

        <li>Praesentium beatae totam iste atque sit quae.</li>

        <li>Dolores et itaque voluptas quas laudantium molestias.</li>

        <li>Aut exercitationem magni minus eum temporibus.</li>

        <li>Officiis dolores dolore.</li>

        <li>Iusto inventore asperiores deserunt eum est ut dolores.</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.