Primary Styled Boxes - Reference - Well of Many Worlds

# Primary Styled Card Boxes Reference <div class="primary-card-container"> <div class="primary-card pc-note"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2z"/></svg> </span>Note </div> <div class="primary-card-body">This is a Note card.</div> </div> <div class="primary-card pc-abstract"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 7V4a2 2 0 0 1 2-2h14"/><path d="M22 7V4a2 2 0 0 0-2-2H8"/><path d="M2 7h20"/><path d="M2 17V7"/><path d="M22 17V7"/><path d="M2 17h20"/><path d="M2 21v-4"/><path d="M22 21v-4"/></svg> </span>Abstract </div> <div class="primary-card-body">This is an Abstract card.</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" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 is an Info card.</div> </div> <div class="primary-card pc-tip"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M2 12a10 10 0 0 1 20 0c0 4-3 6-3 6H5s-3-2-3-6z"/></svg> </span>Tip </div> <div class="primary-card-body">This is a Tip card.</div> </div> <div class="primary-card pc-success"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2l4-4"/><circle cx="12" cy="12" r="10"/></svg> </span>Success </div> <div class="primary-card-body">This is a Success card.</div> </div> <div class="primary-card pc-warning"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> </span>Warning </div> <div class="primary-card-body">This is a Warning card.</div> </div> <div class="primary-card pc-error"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg> </span>Error </div> <div class="primary-card-body">This is an Error card.</div> </div> <div class="primary-card pc-question"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.82 1c0 2-3 2-3 4"/><line x1="12" y1="17" x2="12" y2="17"/></svg> </span>Question </div> <div class="primary-card-body">This is a Question card.</div> </div> <div class="primary-card pc-important"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8 7 4 9 4 13a8 8 0 0 0 16 0c0-4-4-6-8-11z"/></svg> </span>Important </div> <div class="primary-card-body">This is an Important card.</div> </div> <div class="primary-card pc-example"> <div class="primary-card-title"> <span class="primary-card-icon">  <svg xmlns="http://www.w3.org/2000/svg" class="lucide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg> </span>Example </div> <div class="primary-card-body">This is an Example card.</div> </div>  </div>