Fundraising events
Flowbite helps you connect with friends, family and communities of people who share your interests.
$376,856of 400k goal
2,756 donors
Thank you for supporting in planting trees work.
Our fundraisers are a creative bunch when it comes to taking on challenges, from beard shaves and bake sales to stand-up comedy and streaming marathons. There is something for everyone.
$75,856of 150k goal
568 donors
Thank you for supporting in planting trees work.
Our fundraisers are a creative bunch when it comes to taking on challenges, from beard shaves and bake sales to stand-up comedy and streaming marathons. There is something for everyone.
<?php
/**
* Title: CTA with two cards and images
* Slug: cta-with-two-cards-and-images
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"CTA with two cards and images"},"align":"full","className":"cta-with-two-card-and-images","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull cta-with-two-card-and-images"><!-- wp:group {"align":"full","className":"cta-with-two-card-and-images__wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull cta-with-two-card-and-images__wrapper"><!-- wp:group {"className":"cta-with-two-card-and-images__header","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-with-two-card-and-images__header"><!-- wp:heading {"className":"cta-with-two-card-and-images__title"} -->
<h2 class="wp-block-heading cta-with-two-card-and-images__title">Fundraising events</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"cta-with-two-card-and-images__description"} -->
<p class="cta-with-two-card-and-images__description">Flowbite helps you connect with friends, family and communities of people who share your interests.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:columns {"className":"cta-with-two-card-and-images__cards"} -->
<div class="wp-block-columns cta-with-two-card-and-images__cards"><!-- wp:column {"className":"cta-with-two-card-and-images__column"} -->
<div class="wp-block-column cta-with-two-card-and-images__column"><!-- wp:group {"className":"cta-with-two-card-and-images__card","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-with-two-card-and-images__card"><!-- wp:image {"sizeSlug":"large","className":"cta-with-two-card-and-images__image"} -->
<figure class="wp-block-image size-large cta-with-two-card-and-images__image"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/fundraising-1.png" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"cta-with-two-card-and-images__amount"} -->
<p class="cta-with-two-card-and-images__amount"><strong>$376,856</strong>of 400k goal</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"cta-with-two-card-and-images__donors"} -->
<p class="cta-with-two-card-and-images__donors">2,756 donors</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"cta-with-two-card-and-images__progress-container","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group cta-with-two-card-and-images__progress-container"><!-- wp:group {"className":"cta-with-two-card-and-images__progress-bar","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group cta-with-two-card-and-images__progress-bar"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:heading {"level":3,"className":"cta-with-two-card-and-images__card-title"} -->
<h3 class="wp-block-heading cta-with-two-card-and-images__card-title">Thank you for supporting in planting trees work.</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"cta-with-two-card-and-images__card-description"} -->
<p class="cta-with-two-card-and-images__card-description"> Our fundraisers are a creative bunch when it comes to taking on challenges, from beard shaves and bake sales to stand-up comedy and streaming marathons. There is something for everyone.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"cta-with-two-card-and-images__buttons"} -->
<div class="wp-block-buttons cta-with-two-card-and-images__buttons"><!-- wp:button {"className":"cta-with-two-card-and-images__button cta-with-two-card-and-images__button\u002d\u002dprimary"} -->
<div class="wp-block-button cta-with-two-card-and-images__button cta-with-two-card-and-images__button--primary"><a class="wp-block-button__link wp-element-button">Donate now</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"cta-with-two-card-and-images__button cta-with-two-card-and-images__button\u002d\u002dsecondary","icon":"arrow-right","iconPositionLeft":true} -->
<div class="wp-block-button cta-with-two-card-and-images__button cta-with-two-card-and-images__button--secondary"><a class="wp-block-button__link wp-element-button">Share this Fundraiser</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"cta-with-two-card-and-images__column"} -->
<div class="wp-block-column cta-with-two-card-and-images__column"><!-- wp:group {"className":"cta-with-two-card-and-images__card","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-with-two-card-and-images__card"><!-- wp:image {"sizeSlug":"large","className":"cta-with-two-card-and-images__image"} -->
<figure class="wp-block-image size-large cta-with-two-card-and-images__image"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/fundraising-2.png" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:group {"className":"cta-with-two-card-and-images__progress-info","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-with-two-card-and-images__progress-info"><!-- wp:paragraph {"className":"cta-with-two-card-and-images__amount"} -->
<p class="cta-with-two-card-and-images__amount"><strong>$75,856</strong>of 150k goal</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"cta-with-two-card-and-images__donors"} -->
<p class="cta-with-two-card-and-images__donors">568 donors</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"cta-with-two-card-and-images__progress-container","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group cta-with-two-card-and-images__progress-container"><!-- wp:group {"className":"cta-with-two-card-and-images__progress-bar","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group cta-with-two-card-and-images__progress-bar"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:heading {"level":3,"className":"cta-with-two-card-and-images__card-title"} -->
<h3 class="wp-block-heading cta-with-two-card-and-images__card-title">Thank you for supporting in planting trees work.</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"cta-with-two-card-and-images__card-description"} -->
<p class="cta-with-two-card-and-images__card-description"> Our fundraisers are a creative bunch when it comes to taking on challenges, from beard shaves and bake sales to stand-up comedy and streaming marathons. There is something for everyone.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"cta-with-two-card-and-images__buttons"} -->
<div class="wp-block-buttons cta-with-two-card-and-images__buttons"><!-- wp:button {"className":"cta-with-two-card-and-images__button cta-with-two-card-and-images__button\u002d\u002dprimary"} -->
<div class="wp-block-button cta-with-two-card-and-images__button cta-with-two-card-and-images__button--primary"><a class="wp-block-button__link wp-element-button">Donate now</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"cta-with-two-card-and-images__button cta-with-two-card-and-images__button\u002d\u002dsecondary","icon":"arrow-right","iconPositionLeft":true} -->
<div class="wp-block-button cta-with-two-card-and-images__button cta-with-two-card-and-images__button--secondary"><a class="wp-block-button__link wp-element-button">Share this Fundraiser</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:group {"className":"cta-with-two-card-and-images__footer","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-with-two-card-and-images__footer"><!-- wp:buttons {"className":"cta-with-two-card-and-images__view-all","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons cta-with-two-card-and-images__view-all"><!-- wp:button {"className":"cta-with-two-card-and-images__view-all-button is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button cta-with-two-card-and-images__view-all-button is-style-outline"><a class="wp-block-button__link wp-element-button">View all fundraising events</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->
.cta-with-two-card-and-images {
@apply bg-white dark:bg-gray-900;
.cta-with-two-card-and-images__wrapper {
@apply max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;
.cta-with-two-card-and-images__header {
@apply max-w-2xl mx-auto text-center pt-0 pb-0;
.cta-with-two-card-and-images__title {
@apply text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white;
}
.cta-with-two-card-and-images__description {
@apply mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl;
}
}
.cta-with-two-card-and-images__cards {
@apply grid grid-cols-1 gap-4 mt-8 xl:gap-12 md:grid-cols-2 flex-col md:flex-row mb-0;
.cta-with-two-card-and-images__column {
@apply flex flex-col ;
}
.cta-with-two-card-and-images__card {
@apply p-5 space-y-4 flex-1 bg-white border border-gray-200 rounded-lg shadow-md lg:p-8 dark:bg-gray-800 dark:border-gray-700;
.cta-with-two-card-and-images__image {
@apply mb-0;
img {
@apply object-cover w-full rounded-lg shadow-lg;
}
}
.cta-with-two-card-and-images__amount,
.cta-with-two-card-and-images__donors {
@apply relative;
}
.wp-block-group:has(.cta-with-two-card-and-images__amount) {
@apply flex items-center justify-between gap-6 mx-0;
}
.cta-with-two-card-and-images__amount {
@apply flex items-center w-3/4 mb-0 gap-2 text-sm font-normal text-gray-500 dark:text-gray-400;
strong {
@apply text-lg font-bold text-gray-900 dark:text-white;
}
}
.cta-with-two-card-and-images__donors {
@apply text-xs w-1/4 mb-0 font-normal text-right text-gray-500 dark:text-gray-400;
}
.cta-with-two-card-and-images__progress-container {
@apply w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-1;
}
.cta-with-two-card-and-images__progress-bar {
@apply bg-primary-600 h-2.5 rounded-full;
width: 85%;
}
.cta-with-two-card-and-images__card-title {
@apply text-lg font-bold leading-tight text-gray-900 dark:text-white;
}
.cta-with-two-card-and-images__card-description {
@apply text-base font-normal text-gray-500 dark:text-gray-400;
}
.cta-with-two-card-and-images__buttons {
@apply flex flex-col gap-4 sm:flex-row lg:flex-row lg:items-center w-full;
.cta-with-two-card-and-images__button {
@apply w-full md:w-auto;
}
.cta-with-two-card-and-images__button--primary a {
@apply w-full md:w-auto text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
}
.cta-with-two-card-and-images__button--secondary a {
@apply w-full md:w-auto px-5 py-2.5 text-sm justify-center font-medium text-gray-900 inline-flex items-center focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
}
}
}
.cta-with-two-card-and-images__column:nth-child(2) .cta-with-two-card-and-images__progress-bar {
width: 50%;
}
}
.cta-with-two-card-and-images__footer {
@apply mt-8 text-center;
.cta-with-two-card-and-images__view-all-button a {
@apply inline-flex items-center text-lg font-medium text-primary-600 hover:underline dark:text-primary-500 border-none;
}
}
}
}