Copy Code
<?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 -->
Copy Code
.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;
}
}
}