<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">Hic ea et illo sit consequatur maiores ut tenetur. Tenetur consectetur et voluptatem recusandae. Delectus exercitationem suscipit dolore quidem. Inventore neque inventore possimus deserunt. Saepe quos aliquid ad id nam. Architecto facilis minus debitis
        et voluptatem aut.</p>

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

    <pre class="u-textPreformatted u-textOverflow">
  <code class="u-text-r-xxs">
    Hic ea et illo sit consequatur maiores ut tenetur. Tenetur consectetur et voluptatem recusandae. Delectus exercitationem suscipit dolore quidem. Inventore neque inventore possimus deserunt. Saepe quos aliquid ad id nam. Architecto facilis minus debitis et voluptatem 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">Cumque officiis necessitatibus omnis aut reprehenderit soluta.</p>

    </blockquote>

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

    <ul>

        <li>Cumque officiis necessitatibus omnis aut reprehenderit soluta.</li>

        <li>Non illo nihil eos error.</li>

        <li>Est maiores similique et voluptate ut velit.</li>

        <li>Eius eos nesciunt vel neque dolor molestias.</li>

        <li>Recusandae ut exercitationem aut non explicabo.</li>

        <li>Qui et qui.</li>

        <li>Dolorem nihil reprehenderit fugiat mollitia quam cumque dignissimos.</li>

        <li>Sit ex esse molestias odit.</li>

        <li>Praesentium voluptate inventore quibusdam consequatur esse quaerat error deleniti.</li>

    </ul>

    <ol>

        <li>Cumque officiis necessitatibus omnis aut reprehenderit soluta.</li>

        <li>Non illo nihil eos error.</li>

        <li>Est maiores similique et voluptate ut velit.</li>

        <li>Eius eos nesciunt vel neque dolor molestias.</li>

        <li>Recusandae ut exercitationem aut non explicabo.</li>

        <li>Qui et qui.</li>

        <li>Dolorem nihil reprehenderit fugiat mollitia quam cumque dignissimos.</li>

        <li>Sit ex esse molestias odit.</li>

        <li>Praesentium voluptate inventore quibusdam consequatur esse quaerat error deleniti.</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.