Folder Cards
created by:dragon-heist
HTMLMixed ColorsBootstrapFolder
Copy
<div class="row no-gutters justify-content-center" style="
/*-----------------------------------------------------------------------------------------*/;
/*-- Change the [ --folder-radius ] number to change how rounded the corners are! ---------*/;
/*-- [ 0.25rem ] can be used to make it look more like a default Bootstrap card -----------*/;
/*-----------------------------------------------------------------------------------------*/;
--folder-radius: .5rem;
--folder-padding: .3rem;
/*-----------------------------------------------------------------------------------------*/;
/*-- Change [ --folder-spacing ] to make the gaps between the folders bigger or smaller! --*/;
/*-- I tend to use [ .5rem ] or [ 1rem ] by default ---------------------------------------*/;
/*-----------------------------------------------------------------------------------------*/;
--folder-spacing: .5rem;
/*-----------------------------------------------------------------------------------------*/;
/*-- Other folder variables! --------------------------------------------------------------*/;
/*-----------------------------------------------------------------------------------------*/;
--icon-size: 2rem;
--folder-card-bg: rgba(0,0,0,0.6);
--folder-font: Trebuchet MS, sans-serif; /* -- remove if you want to use the default Toyhouse font -- */;
--folder-title-size: 1.2rem;
--folder-title-spacing: .05em;
--folder-subtitle-spacing: .03em;
--shadow-color: #000000;
--folder-text-shadow: drop-shadow(1px 1px .1em var(--shadow-color)) drop-shadow(0 -1px .1em var(--shadow-color)) drop-shadow(-1px 0 .1em var(--shadow-color));
">
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6" style="padding:var(--folder-spacing);">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59534398_7NzGMK78S4rpUm7.png'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-clouds mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6" style="padding:var(--folder-spacing);">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59534404_jbkvqKPi0ORqmSN.png'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-tree mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6" style="padding:var(--folder-spacing);">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59531685_JQGRsjzC7rZJQzc.jpg'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-pancakes mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6" style="padding:var(--folder-spacing);">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59534436_9rJqrmdg467ZbF3.png'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-crow mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6" style="padding:var(--folder-spacing);">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59534410_AM4dQqfZw24tFMW.png'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-wave mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- FOLDER --------------------------------------------------->
<div class="col-xl-3 col-lg-4 col-md-6 p-2">
<!-- FOLDER CONTAINER -->
<div class="card bg-faded p-1 my-1 text-white" style="border-radius:var(--folder-radius); position:relative; overflow:hidden;">
<!-- FOLDER TITLE DISPLAY -->
<div class="card border-0 p-2" style="
background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/59531690_9Kxx7pHzPjrO9A3.png'); /* <== Change the image URL here! */;
background-position:center; background-size:cover; border-radius:var(--folder-radius);">
<div class="text-center text-white p-3" style="background:var(--folder-card-bg); border-radius:var(--folder-radius);">
<div style="filter:var(--folder-text-shadow);">
<!-- ICON -->
<i class="fa-duotone fa-solid fa-moon-stars mb-2" style="font-size:var(--icon-size);"></i> <!-- icon end -->
<!-- FOLDER NAME -->
<div class="mb-1" style="font-variant:small-caps; font-weight:600; font-size:var(--folder-title-size); letter-spacing:var(--folder-title-spacing); font-family:var(--folder-font);">
Folder Name
</div> <!-- folder name end -->
<!-- SUBTITLE CONTAINER -->
<span class="text-info font-weight-bold" style="font-family:var(--folder-font); letter-spacing:var(--folder-subtitle-spacing);">
<span>content</span>
<i class="fa-solid fa-sparkle text-primary mx-1"></i> <!-- icon divider; remove if you don't want a spacer -->
<span>content</span>
</span> <!-- subtitle container end -->
</div>
</div>
</div> <!-- folder title display end -->
<!-- FOLDER LINK -->
<a href="#"
class="btn btn-outline-secondary border-0" style="top:0; bottom:0; right:0; left:0; position:absolute; mix-blend-mode:color-dodge; opacity:.5;"></a> <!-- folder link end -->
</div> <!-- folder container end -->
</div> <!-- folder end -->
<!------------------------------------------------------------->
<!-- (add more above this line!) ------------------------------>
</div>
<div class="text-center mt-n1">
<a href="https://toyhou.se/37518321." class="tooltipster" title="code by dragon-heist"><i class="fa-regular fa-code fa-sm"></i></a>
</div>