"Semantic Ui Cards"
Semantic UI 2.2.10 Snippet by Gurdeep Osahan

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="ui large secondary pointing menu">
<a class="active item" data-tab="first"><i class="instagram outline icon"></i>Instagram</a>
<a class="item" data-tab="second"><i class="comments outline icon"></i>DIRECT</a>
<a class="item" data-tab="third"><i class="list icon"></i>ACTIVITY</a>
<div class="ui right item">
<div class="ui search transparent icon input">
<input type="text" placeholder="Search ..." class="prompt" /><i class="search link icon"></i>
</div>
</div>
</div>
<div class="ui bottom attached tab active" data-tab="first">
<div class="ui container">
<div id="instafeed" class="ui three column doubling centered grid container"></div>
</div>
</div>
<div class="ui bottom attached tab" data-tab="second">
<div class="ui middle aligned divided list">
<div class="item">
<div class="right floated content">
<div class="ui button">Add</div>
</div>
<img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
<div class="content">
Lena
</div>
</div>
<div class="item">
<div class="right floated content">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
// tabbed menus
$('.menu .item').tab();
// first script to pull posts
var accessToken = '2374801533.97f1825.9e25972bb0c444e893ac48c6fe32025e'; // use your own token
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 20 ) { return false; }
// template
$(
'<div class="column">' +
'<div class="ui centered fluid card">' +
'<div class="image">' +
'<img src="' + this.images.standard_resolution.url + '" />' +
'</div>' +
'<div class="content">' +
'<a class="header">' + this.user.full_name + '</a>' +
'<div class="meta">' +
'<span class="date">' + this.filter + ' Filter' +'</span>' +
'</div>' +
'<div class="description">' + this.user.username +
'</div>' +
'</div>'+
'<div class="extra content">' +
'<span class="right floated">' + '<i class="heart outline icon">'+ '</i>' + this.likes.count +' likes'+'</span>' +
'<span class="left floated">' + '<i class="comments outline icon">'+ '</i>' + this.comments.count +' comments'+'</span>' +
'</div>' +
'</div>'+
'</div>'
).appendTo('#instafeed');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: