Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <title>Sematic UI Cards</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css"/> </head> <body> <!-- Start your code here --> <div class="container"> <div class="ui link cards"> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png"> </div> <div class="content"> <div class="header">Matt Giampietro</div> <div class="meta"> <a>Friends</a> </div> <div class="description"> Matthew is an interior designer living in New York. </div> </div> <div class="extra content"> <span class="right floated"> Joined in 2013 </span> <span> <i class="user icon"></i> 75 Friends </span> </div> </div> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/molly.png"> </div> <div class="content"> <div class="header">Molly</div> <div class="meta"> <span class="date">Coworker</span> </div> <div class="description"> Molly is a personal assistant living in Paris. </div> </div> <div class="extra content"> <span class="right floated"> Joined in 2011 </span> <span> <i class="user icon"></i> 35 Friends </span> </div> </div> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/elyse.png"> </div> <div class="content"> <div class="header">Elyse</div> <div class="meta"> <a>Coworker</a> </div> <div class="description"> Elyse is a copywriter working in New York. </div> </div> <div class="extra content"> <span class="right floated"> Joined in 2014 </span> <span> <i class="user icon"></i> 151 Friends </span> </div> </div> </div> <div class="ui cards"> <div class="card"> <div class="content"> <img class="right floated mini ui image" src="https://semantic-ui.com/images/avatar/large/elliot.jpg"> <div class="header"> Elliot Fu </div> <div class="meta"> Friends of Veronika </div> <div class="description"> Elliot requested permission to view your contact details </div> </div> <div class="extra content"> <div class="ui two buttons"> <div class="ui basic green button">Approve</div> <div class="ui basic red button">Decline</div> </div> </div> </div> <div class="card"> <div class="content"> <img class="right floated mini ui image" src="https://semantic-ui.com/images/avatar/large/jenny.jpg"> <div class="header"> Jenny Hess </div> <div class="meta"> New Member </div> <div class="description"> Jenny wants to add you to the group <b>best friends</b> </div> </div> <div class="extra content"> <div class="ui two buttons"> <div class="ui basic green button">Approve</div> <div class="ui basic red button">Decline</div> </div> </div> </div> </div> <div class="ui cards"> <div class="card"> <div class="content"> <div class="header">Elliot Fu</div> <div class="description"> Elliot Fu is a film-maker from New York. </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> <div class="card"> <div class="content"> <div class="header">Veronika Ossi</div> <div class="description"> Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying. </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> <div class="card"> <div class="content"> <div class="header">Jenny Hess</div> <div class="description"> Jenny is a student studying Media Management at the New School </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> </div> </div> <!-- End your code here --> </body> </html>
.container { padding: 40px; }
// Write JavaScript here