Feature list with icons - Blocks Library

Project Management

Unified Contribution Graph
Org activity graph
Org dependency insights
Milestones
Repo insights

Collaborative Coding

Dynamic reports and dashboards
Code review assignments
Team discussions
Protected branches
Draft pull requests

Enterprise Security

Required reviews
Dependabot security and
Dependency graph
GitHub Advisory Database
GPG commit signing verification

<?php
/**
 * Title: Feature list with icons
 * Slug: wlc/feature-list-with-icons
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Feature list with icons","categories":["featured"],"patternName":"wlc/feature-list-with-icons"},"align":"full","className":"feature-list-with-icons","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull feature-list-with-icons"><!-- wp:group {"className":"feature-list-with-icons__wrapper","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group feature-list-with-icons__wrapper"><!-- wp:group {"className":"feature-list-with-icons__header","layout":{"type":"default"}} -->
<div class="wp-block-group feature-list-with-icons__header"><!-- wp:heading {"className":"feature-list-with-icons__heading"} -->
<h2 class="wp-block-heading feature-list-with-icons__heading">Secure platform, secure data</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"feature-list-with-icons__description"} -->
<p class="feature-list-with-icons__description">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"feature-list-with-icons__content","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull feature-list-with-icons__content"><!-- wp:group {"className":"feature-list-with-icons__content-box feature-list-with-icons__content-box\u002d\u002dprimary","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group feature-list-with-icons__content-box feature-list-with-icons__content-box--primary"><!-- wp:group {"className":"feature-list-with-icons__content-svg feature-list-with-icons__content-svg\u002d\u002dprimary","layout":{"type":"default"}} -->
<div class="wp-block-group feature-list-with-icons__content-svg feature-list-with-icons__content-svg--primary"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg class=\u0022w-5 h-5 text-primary-600 dark:text-primary-300 lg:w-8 lg:h-8\u0022 fill=\u0022currentColor\u0022 viewBox=\u00220 0 20 20\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\u003cpath fill-rule=\u0022evenodd\u0022 d=\u0022M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z\u0022 clip-rule=\u0022evenodd\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3,"className":"feature-list-with-icons__content-heading"} -->
<h3 class="wp-block-heading feature-list-with-icons__content-heading">Project Management</h3>
<!-- /wp:heading -->

<!-- wp:list {"className":"feature-list-with-icons__content-list"} -->
<ul class="wp-block-list feature-list-with-icons__content-list"><!-- wp:list-item -->
<li>Unified Contribution Graph</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Org activity graph</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Org dependency insights</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Milestones</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Repo insights</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"feature-list-with-icons__content-box feature-list-with-icons__content-box\u002d\u002dsecondary","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group feature-list-with-icons__content-box feature-list-with-icons__content-box--secondary"><!-- wp:group {"className":"feature-list-with-icons__content-svg feature-list-with-icons__content-svg\u002d\u002dsecondary","layout":{"type":"default"}} -->
<div class="wp-block-group feature-list-with-icons__content-svg feature-list-with-icons__content-svg--secondary"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg class=\u0022w-5 h-5 text-purple-600 dark:text-purple-300 lg:w-8 lg:h-8\u0022 fill=\u0022currentColor\u0022 viewBox=\u00220 0 20 20\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\u003cpath d=\u0022M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3,"className":"feature-list-with-icons__content-heading"} -->
<h3 class="wp-block-heading feature-list-with-icons__content-heading">Collaborative Coding</h3>
<!-- /wp:heading -->

<!-- wp:list {"className":"feature-list-with-icons__content-list"} -->
<ul class="wp-block-list feature-list-with-icons__content-list"><!-- wp:list-item -->
<li>Dynamic reports and dashboards</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Code review assignments</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Team discussions</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Protected branches</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Draft pull requests</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"feature-list-with-icons__content-box feature-list-with-icons__content-box\u002d\u002dtertiary","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group feature-list-with-icons__content-box feature-list-with-icons__content-box--tertiary"><!-- wp:group {"className":"feature-list-with-icons__content-svg feature-list-with-icons__content-svg\u002d\u002dtertiary","layout":{"type":"default"}} -->
<div class="wp-block-group feature-list-with-icons__content-svg feature-list-with-icons__content-svg--tertiary"><!-- wp:wlc/custom-svg {"svgContent":"  \u003csvg class=\u0022w-5 h-5 text-teal-600 dark:text-teal-300 lg:w-8 lg:h-8\u0022 fill=\u0022currentColor\u0022 viewBox=\u00220 0 20 20\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\u003cpath fill-rule=\u0022evenodd\u0022 d=\u0022M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z\u0022 clip-rule=\u0022evenodd\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e  "} /--></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3,"className":"feature-list-with-icons__content-heading"} -->
<h3 class="wp-block-heading feature-list-with-icons__content-heading">Enterprise Security</h3>
<!-- /wp:heading -->

<!-- wp:list {"className":"feature-list-with-icons__content-list"} -->
<ul class="wp-block-list feature-list-with-icons__content-list"><!-- wp:list-item -->
<li>Required reviews</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Dependabot security and</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Dependency graph</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>GitHub Advisory Database</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>GPG commit signing verification</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.feature-list-with-icons {
    @apply bg-white dark:bg-gray-900;

    .feature-list-with-icons__wrapper {
        @apply py-8 px-4 mx-auto sm:py-16 lg:px-6;

        .feature-list-with-icons__header {
            @apply max-w-screen-md mb-8 lg:mb-16;
        }

        .feature-list-with-icons__heading {
            @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
        }

        .feature-list-with-icons__description {
            @apply font-light text-gray-500 dark:text-gray-400 sm:text-xl mb-0;
        }

        .feature-list-with-icons__content {
            @apply space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-8 xl:gap-12 md:space-y-0 w-full;
        }

        .feature-list-with-icons__content-box {
            @apply w-full;

            .feature-list-with-icons__content-svg {
                @apply flex justify-center items-center mb-4 w-10 h-10 lg:h-16 lg:w-16 rounded;
            }

            .feature-list-with-icons__content-svg--primary {
                @apply bg-primary-100 dark:bg-primary-900;
            }

            .feature-list-with-icons__content-svg--secondary {
                @apply bg-purple-100 dark:bg-purple-900;
            }

            .feature-list-with-icons__content-svg--tertiary {
                @apply bg-teal-100 dark:bg-teal-900;
            }
        }

        .feature-list-with-icons__content-heading {
            @apply mb-2 text-xl font-bold dark:text-white text-gray-900;
        }

        .feature-list-with-icons__content-list {
            @apply my-6 lg:mb-0 space-y-4;

            li {
                @apply flex pl-7 relative leading-tight text-gray-500 dark:text-gray-400;
            }

            li::before {
                @apply content-[''] absolute left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
                mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
                mask-repeat: no-repeat;
                background-image: none;
            }
        }

        .feature-list-with-icons__content-box--primary .feature-list-with-icons__content-list li::before {
            @apply bg-primary-600 dark:bg-primary-500;
        }

        .feature-list-with-icons__content-box--secondary .feature-list-with-icons__content-list li::before {
            @apply bg-purple-600 dark:bg-purple-500;
        }

        .feature-list-with-icons__content-box--tertiary .feature-list-with-icons__content-list li::before {
            @apply bg-teal-500 dark:bg-teal-400;
        }
    }
}