<ol class="Prose Bullets">

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Odit quos doloribus nemo autem excepturi dolorem explicabo.</h2>
            <p>Exercitationem laudantium eos ut dolorem. Officiis rerum sit quisquam maxime. Blanditiis at deserunt soluta ullam sint. Rerum qui voluptatum in quia. Dignissimos voluptatem dolor repellendus. Quisquam itaque fugit vel eum nisi ullam. Consequatur
                culpa nostrum magnam natus cum. Rerum omnis voluptatum. Repellat nam rem maxime.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Tempore accusamus eaque rerum est.</h2>
            <p>Alias est et inventore laudantium ullam eligendi. Dolor veritatis non quis. Rerum doloremque illo porro excepturi ipsa facilis rerum maxime. Iure libero et cum est. Voluptatem dolor qui voluptas praesentium iste ut molestiae maxime. Magni
                nihil repudiandae ut esse. Nihil omnis ut eaque maxime. Aut asperiores qui libero nostrum ex. Voluptatem fugiat id esse voluptates vel nostrum. Consequatur non nesciunt quia voluptas voluptatibus impedit non accusantium. Debitis molestiae
                reiciendis minima debitis.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Ut adipisci iure tempore ullam laborum.</h2>
            <p>Itaque assumenda aut. Vero laudantium fugit debitis quia culpa. Rerum eligendi ducimus eos dolorem veritatis est vel est. Aut ut aliquam ea voluptatem omnis. Unde iure dicta aut maxime dolorum maiores. Non aliquam debitis numquam consequatur
                corrupti occaecati et inventore. Necessitatibus dolore sint soluta magni rem asperiores. Fugiat dignissimos aliquam doloremque. Vitae veniam modi quia molestiae. Id aliquid expedita. Totam tempora quo exercitationem est. Cupiditate delectus
                quasi autem. Veritatis beatae non. Fugiat natus repudiandae.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Consequuntur est et quo ullam aut omnis aut et.</h2>
            <p>Assumenda eius quia occaecati. Natus sed doloremque. Aut numquam sit ut nesciunt. Non quas repellat dolor nisi consequuntur beatae doloremque. Modi odit laudantium. Cumque perferendis nostrum et sunt odio voluptatum ut et. Nulla similique
                modi optio alias quia repellendus nesciunt. Est similique nihil. Tempora dolores laborum qui. Optio vero perferendis animi enim. In et ea dolores optio alias accusantium ut dolorem quis. Ut veritatis voluptas enim accusantium nihil. Deleniti
                quis eligendi ullam adipisci quia nihil itaque. Libero quaerat et veniam id repellendus sed in aut.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Et vitae qui ullam quis alias quibusdam quos.</h2>
            <p>Est facere sed ipsam excepturi ut quidem nisi. Et quia molestiae quo repellat architecto tenetur nobis omnis. Quia vero omnis ad magnam molestiae et saepe. Molestiae labore quisquam. Fugit dicta enim iure adipisci voluptas fugit molestias
                adipisci blanditiis. Perferendis ex expedita aut aspernatur hic fugiat tempora vel eius. Sint quaerat facilis et. Minima quis voluptatibus qui nostrum. Quae officia facilis voluptatem suscipit. Ipsam fuga officiis eos ut blanditiis. Aut
                fugit aut consequatur aut. Praesentium et omnis quae ea qui amet et molestiae quod. Porro voluptates repellat accusantium rerum.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Libero porro non quasi sunt a dolor voluptatem voluptas ipsam.</h2>
            <p>Impedit qui ut quaerat perspiciatis magnam quo hic. Asperiores officiis laborum dolore nihil quod necessitatibus numquam provident esse. Et dolore et. Ut voluptatem nihil qui ipsum explicabo. Sequi nihil sunt molestias nisi neque aut asperiores
                eveniet. Fuga suscipit cum. A enim in earum. Rerum vitae officia est. Laborum autem hic iusto. A illum culpa et sunt nihil autem molestiae odit. Non natus sequi et architecto doloribus id. Consequuntur maxime cumque in nostrum dolorem.
                Suscipit saepe vel omnis blanditiis occaecati ea iure nostrum. Dolorem laboriosam quam omnis. Voluptate qui quia fugit sed et non deleniti autem.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Quia quos placeat et.</h2>
            <p>Non dolor deserunt expedita molestiae consequatur officiis at. Maxime voluptas corrupti fugiat dolorum et ad ut. Maxime voluptas fugit odio et accusamus neque. Non id tempora voluptatem. Est blanditiis et possimus officia. Autem quisquam fugiat
                dolorum magnam assumenda. Aliquid nostrum quis voluptas dolores quam doloremque ullam. Est eligendi sapiente explicabo dolores numquam aut. Et architecto facilis ad nihil. Aut dolor officiis necessitatibus asperiores quae enim sapiente
                molestiae. Suscipit non aut enim itaque ut vel unde accusantium vel. Nostrum dolorum incidunt. Totam accusantium perferendis quibusdam impedit corporis nulla qui molestiae consequatur. Consequatur placeat nesciunt omnis vitae velit id
                quod dolor.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Magni ut ut quae.</h2>
            <p>Repellat repellat est sint vel excepturi illum repudiandae laudantium. Sed perspiciatis a eos velit eaque ipsa labore inventore ea. Ut ut iusto at laborum ratione vel. Tempore eos delectus aliquid rerum similique iure rem sed. Deleniti non
                et sunt. Quo quibusdam et magnam at itaque aut fugit. Eum est ut dicta vel. Ea hic dignissimos quibusdam voluptatem aperiam rerum consequatur. Eum corporis veniam aut eveniet ad voluptatem est. Alias error architecto voluptatem accusamus
                rerum quia temporibus minima ratione. Nam ratione fuga quod rerum. Occaecati vel eligendi placeat ipsam.</p>
        </div>
    </li>

    <li class="u-margin-bottom-s">
        <div class="Prose u-layout-prose">
            <h2>Modi voluptatem qui commodi harum.</h2>
            <p>Similique magnam dolor. Et aut rem consequatur. Veniam ea cum temporibus cupiditate aperiam consectetur recusandae. Vero et debitis illo. Pariatur non odit magnam sapiente odio soluta. Non aut et omnis qui architecto ducimus dolore qui. Eum
                quidem ea beatae. Porro quaerat sunt harum quo sunt. Et quam possimus ex et voluptas nisi fuga. Et facilis id nesciunt voluptates suscipit ex ut officia magni. Nisi repudiandae possimus. Et omnis illo id labore. Sed occaecati vitae vitae
                accusamus aliquid.</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/components/bullets/index.css
  • Size: 500 Bytes

There are no notes for this item.