Cards
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate accusamus optio ab nihil qui, dicta consequuntur illum praesentium laborum assumenda sed inventore soluta eum et repellat vero sunt facere eligendi?
Example #1
Card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
<div style="display: flex; width: 320px; flex-direction: column; border-radius: 4px; border: 1px solid #e5e7eb; padding: 16px;">
<div style="margin-bottom: 8px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">
<h2 style="margin: 0px; font-weight: bold;">Card</h2>
</div>
<div style="margin-bottom: 8px;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
</p>
</div>
<div style="display: flex; justify-content: flex-end;">
<button style="border-radius: 4px; background: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: white;">Ok</button>
</div>
</div>Example #2
Card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
<div style="display: flex; width: 320px; flex-direction: column; border-radius: 4px; border: 1px solid #e5e7eb; padding: 16px;">
<div style="margin-bottom: 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">
<div style="height: 32px; width: 32px; border-radius: 50%; background: gray;"></div>
<h2 style="margin: 0px; font-weight: bold;">Card</h2>
</div>
<div style="margin-bottom: 8px;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
</p>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px;">
<button style="border-radius: 4px; border: 1px solid #e5e7eb; border-color: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: blue;">Cancel</button>
<button style="border-radius: 4px; background: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: white;">Ok</button>
</div>
</div>Example #3
Card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
<div style="display: flex; width: 320px; flex-direction: column; border-radius: 4px; border: 1px solid #e5e7eb; padding: 16px;">
<div style="margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div style="height: 32px; width: 32px; border-radius: 50%; background: gray;"></div>
<h2 style="margin: 0px; font-weight: bold;">Card</h2>
</div>
<button style="padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">X</button>
</div>
<div style="margin-bottom: 8px;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
</p>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px;">
<button style="border-radius: 4px; border: 1px solid #e5e7eb; border-color: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: blue;">Cancel</button>
<button style="border-radius: 4px; background: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: white;">Ok</button>
</div>
</div>Example #4
Card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
<div style="display: flex; width: 320px; flex-direction: column; border-radius: 4px; border: 1px solid #e5e7eb; padding: 16px;">
<div style="margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div style="height: 32px; width: 32px; border-radius: 50%; background: gray;"></div>
<h2 style="margin: 0px; font-weight: bold;">Card</h2>
</div>
<button style="padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">X</button>
</div>
<div style="margin-bottom: 8px; display: flex; flex-direction: column; align-items: center;">
<img style="margin-bottom: 16px;" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus excepturi earum, error nobis itaque non necessitatibus eius cum consequatur blanditiis ipsa officiis nesciunt quia. Ea cumque recusandae similique officia laborum?
</p>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px;">
<button style="border-radius: 4px; border: 1px solid #e5e7eb; border-color: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: blue;">Cancel</button>
<button style="border-radius: 4px; background: blue; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: white;">Ok</button>
</div>
</div>