<ol class="Prose Bullets">

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Eaque porro quisquam.</h2>
            <p>Est maxime voluptatem dolor animi cumque eum. Aut voluptatibus eum facilis labore quia voluptatem est. Et quia est ea voluptatem voluptas ad sint omnis. Facere quisquam error ipsam libero. Ut veniam inventore hic rerum et consequuntur velit
                deleniti. Enim sit maxime. Reiciendis maiores pariatur doloremque est vel et. Eos autem sunt voluptatum. Qui consequatur deleniti ut laboriosam et qui aut. Reiciendis iure cupiditate veniam aut recusandae explicabo.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Fugiat aut eaque molestias.</h2>
            <p>Culpa aut voluptas quis aut minus magni nostrum aut. Aut possimus rerum qui soluta eum et. Labore maiores cumque explicabo reiciendis mollitia aliquid beatae. Voluptate vero repudiandae eos nulla quod commodi qui. Facilis quidem exercitationem
                adipisci nesciunt dolorum recusandae. Adipisci esse ad earum neque et deleniti. Sint laboriosam quod et quia numquam voluptates beatae non. Illum autem quas. Soluta quaerat praesentium voluptates reiciendis aut in deleniti rem. Recusandae
                consequuntur expedita incidunt magni dolor quas. Dignissimos repellendus quia quas nihil. Ex voluptatum sapiente est placeat possimus nihil eaque recusandae aperiam. Nihil aut occaecati alias autem ab consequuntur fuga sed.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Ullam doloribus rerum.</h2>
            <p>Atque voluptas totam. Quidem omnis autem neque. Excepturi velit aut. Et labore beatae qui expedita voluptas omnis. Eum et magnam beatae voluptate maiores architecto officiis. Aperiam amet illum ut qui id aperiam. Animi dignissimos labore nihil
                aliquam. Non in commodi nulla. Unde vitae blanditiis voluptatibus vitae. Mollitia voluptatibus rem debitis. Illo ut et mollitia sunt ut tempora. Voluptatem sit vel culpa in amet nihil dolorum. Est beatae officiis molestiae. Qui sequi nihil
                exercitationem aut aut. Delectus nemo labore qui sint id animi.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Porro fugit voluptas.</h2>
            <p>Et mollitia quia et ipsa necessitatibus repudiandae voluptatum fugiat. Delectus et et quis vero ullam repudiandae accusamus sit deleniti. Laboriosam ipsa nobis molestiae mollitia sunt fuga dolorem. Quaerat qui nobis inventore voluptatem consequatur
                minima voluptates. Ipsam consequatur molestiae quae. Dicta debitis soluta. Et iusto nisi eveniet dolorem sit. Sapiente consectetur omnis neque modi numquam minima. Labore et porro rerum odio iste. Quia quibusdam excepturi id accusamus.
                Impedit voluptate sed sapiente. Qui mollitia dolor velit est. Dicta enim aut minima aliquid illum itaque. Veniam rerum facere quo quos quia eveniet consectetur perferendis quasi. Eius libero non velit.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Et tenetur modi molestiae.</h2>
            <p>Aspernatur quaerat magni qui repellat eum dignissimos accusamus reprehenderit. Est illo a soluta. Consectetur quibusdam soluta est quod libero nihil distinctio debitis. Ab minus commodi iste et. In nam voluptatibus architecto iure velit reprehenderit
                rerum et. Veritatis tempore ex fuga. Recusandae et totam ab dolorum aliquid. Qui occaecati quia iusto rerum. Ut occaecati impedit repellendus sapiente ut. Ut corporis perspiciatis explicabo quam delectus ipsa qui alias. Possimus provident
                qui alias praesentium sapiente ducimus ad nihil. Ipsum repudiandae nulla sequi dolores perferendis sit sit veniam temporibus. Quia explicabo ut repellendus enim. Nemo eaque aut aperiam at quia quis. Impedit aperiam eaque perferendis sapiente.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Commodi nulla sed rerum dolorem qui.</h2>
            <p>Fugit alias repellendus perferendis libero voluptatem illum ex voluptatem. Sit voluptatem laudantium necessitatibus nostrum recusandae unde quia sint vel. Quo harum consequatur laudantium laborum iste quis. Earum reiciendis ad perspiciatis
                voluptatem ex doloremque et omnis. Inventore voluptatum qui ad amet sed. Exercitationem facilis magnam molestiae. Minima deserunt molestiae veritatis enim labore. Quas accusantium sapiente laboriosam. Laboriosam culpa reiciendis molestiae
                veniam. Beatae eligendi ipsa. Cum non optio quasi atque. Maxime quisquam et cum velit odit illum non veniam magnam.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Quia vel deleniti laboriosam.</h2>
            <p>Quasi quia ea id quis maxime sed. Soluta necessitatibus omnis. Voluptatum dolorem sit quia facilis consequatur. Natus aperiam nihil non unde. In recusandae deserunt placeat beatae qui qui. Fugit veritatis aut quam eaque. Maxime aliquam reiciendis
                quia velit sunt dolorum officiis. Impedit eos nulla fuga vitae consequatur nostrum sed. Consequuntur sint aut. Omnis nulla quo dicta. Esse sit natus sed adipisci eaque reprehenderit ipsa. Aliquid et asperiores reprehenderit ad debitis
                ipsum. Quis nobis quidem aliquam.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Omnis temporibus ex autem nihil distinctio vitae.</h2>
            <p>Eaque culpa impedit aut beatae perferendis omnis odit officiis. Illo tempore ratione quis autem sed nam repudiandae eum nemo. Corporis animi blanditiis eos officia sed rerum expedita dignissimos. Reprehenderit qui quas. Tenetur sed cupiditate
                sit totam fuga perspiciatis possimus. Quo eos rerum. Ex qui quis vero deserunt. Optio magnam alias et ut cumque et ipsa blanditiis. Quam debitis doloribus optio. Magni provident exercitationem deserunt quae rerum sequi repudiandae quod.
                Quia perferendis consectetur aut quia non voluptatem reiciendis. Possimus eos voluptatem quo maiores qui recusandae eaque consequuntur magni. Qui aliquam quis. Voluptas aperiam dignissimos cumque tempora placeat nobis. Iusto reprehenderit
                unde officia ut et.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Aspernatur ad id sunt aut aut dolor id pariatur.</h2>
            <p>Quas est similique unde id rerum magni quia. Laborum maxime non sint qui eum magnam odit ducimus. Quos et et tempore odio autem eos quasi eum cupiditate. Laborum dignissimos magnam est qui voluptates. Ipsa unde itaque in et in est quam. Quam
                ut dolore odio molestias velit omnis sed omnis. Molestiae laudantium laborum quia ut laborum. Et dignissimos iusto soluta dignissimos. Eos ipsam neque sit eaque delectus recusandae consequatur. Exercitationem sequi fugit est culpa porro.
                Omnis molestiae pariatur omnis asperiores. Aut non possimus dolor ut sunt dignissimos adipisci dolorem vel. Dolores eveniet nemo modi aut aliquam autem dolor optio dolorum. Sunt velit explicabo vitae eos.</p>
        </div>
    </li>

</ol>
  • Content:
    /** @define Bullets; weak; */
    
    .Bullets {
      counter-reset: Bullets;
    }
    
    .Bullets > li {
      @extend .u-flex;
    
      counter-increment: Bullets;
    }
    
    .Bullets > li::before {
      @extend .u-background-50;
      @extend .u-color-white;
      @extend .u-borderRadius-circle;
      @extend .u-inlineBlock;
      @extend .u-textCenter;
      @extend .u-textWeight-700;
      @extend .u-sizeFit;
      @extend .u-text-r-s;
    
      content: counter(Bullets);
      height: 2em;
      line-height: 200%;
      margin-right: 0.5em;
      min-width: 2em;
      width: 2em;
    }
    
  • URL: /components/raw/bullets/index.css
  • Filesystem Path: src/modules/bullets/index.css
  • Size: 500 Bytes

There are no notes for this item.