<div class="primary-card-container"> <div class="primary-card pc-tip"> <div class="primary-card-title">Tip</div> <div class="primary-card-body">Helpful advice goes here.</div> </div> <div class="primary-card pc-warning"> <div class="primary-card-title">Warning</div> <div class="primary-card-body">Be cautious about this action.</div> </div> <div class="primary-card pc-error"> <div class="primary-card-title">Error</div> <div class="primary-card-body">Something went wrong here.</div> </div> <div class="primary-card pc-success"> <div class="primary-card-title">Success</div> <div class="primary-card-body">Everything worked as expected.</div> </div> <div class="primary-card pc-info"> <div class="primary-card-title">Info</div> <div class="primary-card-body">Additional information provided here.</div> </div> </div> > [!TIP] > Content <div class="primary-card-container"> <div class="primary-card pc-note"> <div class="primary-card-title">Note</div> <div class="primary-card-body">This is a note card.</div> </div> <div class="primary-card pc-tip"> <div class="primary-card-title">Tip</div> <div class="primary-card-body">Helpful tip content.</div> </div> <div class="primary-card pc-warning"> <div class="primary-card-title">Warning</div> <div class="primary-card-body">Something needs attention.</div> </div> <div class="primary-card pc-success"> <div class="primary-card-title">Success</div> <div class="primary-card-body">Operation succeeded.</div> </div> <div class="primary-card pc-question"> <div class="primary-card-title">Question</div> <div class="primary-card-body">Do you know the answer?</div> </div> </div> > [!NOTE] > Content <div class="primary-card-container"> <div class="primary-card pc-tip"> <div class="primary-card-title">Tip</div> <div class="primary-card-body">Helpful advice goes here.</div> </div> <div class="primary-card pc-success"> <div class="primary-card-title">Success</div> <div class="primary-card-body">Everything worked as expected.</div> </div> </div> <div class="primary-card-container"> <div class="primary-card pc-tip"> <div class="primary-card-title"> <span class="primary-card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-land-plot-icon lucide-land-plot"><path d="m12 8 6-3-6-3v10"/><path d="m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12"/><path d="m6.49 12.85 11.02 6.3"/><path d="M17.51 12.85 6.5 19.15"/></svg></span> <!-- You can replace this with a Lucide icon if available --> Tip </div> <div class="primary-card-body"> Here's a helpful tip inside a custom fluid card. </div> </div> </div> <div class="primary-card pc-info"> <div class="primary-card-title"> <span class="primary-card-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="lucide lucide-info" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10" /> <line x1="12" y1="16" x2="12" y2="12" /> <line x1="12" y1="8" x2="12" y2="8" /> </svg> </span> Info </div> <div class="primary-card-body"> This card uses an inline Lucide icon and has proper spacing. </div> </div>