<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">Magni libero recusandae nihil necessitatibus eaque repudiandae enim porro. Provident accusamus id rem deserunt suscipit odit fugiat. Id doloribus eum est totam ut.</p>

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

    <pre class="u-textPreformatted u-textOverflow">
  <code class="u-text-r-xxs">
    Magni libero recusandae nihil necessitatibus eaque repudiandae enim porro. Provident accusamus id rem deserunt suscipit odit fugiat. Id doloribus eum est totam ut.
  </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">Assumenda consequatur cupiditate mollitia ullam cupiditate similique.</p>

    </blockquote>

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

    <ul>

        <li>Assumenda consequatur cupiditate mollitia ullam cupiditate similique.</li>

        <li>Quis excepturi fuga assumenda animi officiis eum delectus illo.</li>

        <li>Dolores voluptas iste eaque.</li>

        <li>Dolores voluptates qui qui ea laboriosam.</li>

        <li>Voluptate tenetur voluptatem debitis minus eveniet omnis.</li>

        <li>Perspiciatis rerum ab sequi.</li>

        <li>Tenetur quo consequuntur laborum quo excepturi voluptas enim rerum corrupti.</li>

        <li>Provident et delectus modi aliquam hic nam.</li>

        <li>Omnis corporis numquam at.</li>

    </ul>

    <ol>

        <li>Assumenda consequatur cupiditate mollitia ullam cupiditate similique.</li>

        <li>Quis excepturi fuga assumenda animi officiis eum delectus illo.</li>

        <li>Dolores voluptas iste eaque.</li>

        <li>Dolores voluptates qui qui ea laboriosam.</li>

        <li>Voluptate tenetur voluptatem debitis minus eveniet omnis.</li>

        <li>Perspiciatis rerum ab sequi.</li>

        <li>Tenetur quo consequuntur laborum quo excepturi voluptas enim rerum corrupti.</li>

        <li>Provident et delectus modi aliquam hic nam.</li>

        <li>Omnis corporis numquam at.</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.