I have this code for making a cards stackable box. The problem is that this box is showing me a right paddding in the fragment, can anyone help me?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="./semantic/semantic.css"/>
<title>Agora</title>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
<div class="item">
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
</div>
<div class="item">
<div class="ui button">Log-in</div>
</div>
</div>
<div class="ui column centered grid">
<div class="fourteen wide column">
<div class="ui center aligned segment">
<div class="ui stackable four column centered grid" >
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is the problem image:
http://imgur.com/1lrpbUL.png
I need to remove the padding that's in the right side.
Here is the working example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<title>Agora</title>
<style type="text/css">
.ui.card {
margin: auto;
}
</style>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
<div class="item">
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
</div>
<div class="item">
<div class="ui button">Log-in</div>
</div>
</div>
<div class="ui column centered grid">
<div class="fourteen wide column">
<div class="ui center aligned segment">
<div class="ui stackable four column centered grid" >
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It might be a problem that each of these cards do not fill the width of their column so they are aligned to the left.
You could use the class ".cards" which is mentioned here (it uses flexbox to fit the cards perfectly).
The code found in documentation:
<div class="ui cards">
<div class="card">
<a class="image">
<img src="/images/avatar/large/elliot.jpg">
</a>
<div class="content">
<a class="header">Elliot Fu</a>
<div class="meta">
<a>Friends</a>
</div>
<div class="description">
Elliot Fu is a film-maker from New York.
</div>
</div>
</div>
<div class="card">
<a class="image">
<img src="/images/avatar/large/helen.jpg">
</a>
<div class="content">
<a class="header">Helen Troy</a>
<div class="meta">
<a>Friends</a>
</div>
<div class="description">
Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening.
</div>
</div>
</div>
</div>
Related
I'm struggling with a rather simple task but the lack of CSS experience is getting the better of me:
<div class="row">
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
</div>
Above is a row on my view. There are many like it:
I want to split the smallest div to show a second Heading1. Here is base HTML:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Target:
I need to show more information and I see that the div card is empty on the right side. I want to split this div into two. Experimenting with bootstrap classes, the layout breaks.
Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Became this:
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
<small># of Transactions</small>
</div>
<div class="col-md-6">
<h1 class="no-margins">AED #Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
<small>Revenue generated</small>
</div>
</div>
</div>
Sorry for bad title but couldn't think of anything better.
I have this progress bar created with Bootstrap, and images and paragraphs oer and under. But when I try to resize the window (lower it), it changes positions and suddenly wrecks everything. I need it the imgs and paragraphs to stand exactly same positions as the width of the progress bar.
<div>
<p style="display:inline-block;">0</p>
<p style="margin-left:23.6%;display:inline-block;">800</p>
<p style="margin-left:1.9%;display:inline-block;">950</p>
<p style="margin-left:1.9%;display:inline-block;">1100</p>
<p style="margin-left:1.9%;display:inline-block;">1250</p>
<p style="margin-left:1.9%;display:inline-block;">1400</p>
<p style="margin-left:1.9%;display:inline-block;">1550</p>
<p style="margin-left:1.9%;display:inline-block;">1700</p>
<p style="margin-left:1.9%;display:inline-block;">1850</p>
<p style="margin-left:1.9%;display:inline-block;">2000</p>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div>
<img src="/Images/lvl1.png">
<img src="/Images/lvl2.png" style="margin-left:21%;">
<img src="/Images/lvl3.png" style="margin-left:1.3%;">
<img src="/Images/lvl4.png" style="margin-left:1.9%;">
<img src="/Images/lvl5.png" style="margin-left:2.2%;">
<img src="/Images/lvl6.png" style="margin-left:2.3%;">
<img src="/Images/lvl7.png" style="margin-left:2.3%;">
<img src="/Images/lvl8.png" style="margin-left:2.3%;">
<img src="/Images/lvl9.png" style="margin-left:2.3%;">
<img src="/Images/lvl10.png" style="margin-left:2.3%;">
</div>
You are not using bootstrap for the rest of your layout (the labels and icons). Try this one:
<div class="row">
<div class="col-3">
<p>0</p>
</div>
<div class="col-1">
<p>800</p>
</div>
<div class="col-1">
<p>950</p>
</div>
<div class="col-1">
<p>1100</p>
</div>
<div class="col-1">
<p>1250</p>
</div>
<div class="col-1">
<p>1400</p>
</div>
<div class="col-1">
<p>1550</p>
</div>
<div class="col-1">
<p>1700</p>
</div>
<div class="col-1">
<p>1850</p>
</div>
<div class="col-1">
<p>2000</p>
</div>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress col-12" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="/Images/lvl1.png">
</div>
<div class="col-1">
<img src="/Images/lvl2.png">
</div>
<div class="col-1">
<img src="/Images/lvl3.png">
</div>
<div class="col-1">
<img src="/Images/lvl4.png">
</div>
<div class="col-1">
<img src="/Images/lvl5.png">
</div>
<div class="col-1">
<img src="/Images/lvl6.png">
</div>
<div class="col-1">
<img src="/Images/lvl7.png">
</div>
<div class="col-1">
<img src="/Images/lvl8.png">
</div>
<div class="col-1">
<img src="/Images/lvl9.png">
</div>
<div class="col-1">
<img src="/Images/lvl10.png">
</div>
</div>
This is a helpful guild about the Bootstrap Grid System. You might also use a class="col-12" for your progress bar.
EDIT: Working Plunker for Bootstrap4:
Plunker BS 4
EDIT2: Working Plunker for Bootstrap3:
Plunker BS 3
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I am using a semantic-ui framework. I am trying to make a post-comments like structure. currently my code looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<title>Assignments</title>
<style>
.items {
width: 70%;
border: solid;
margin: 100px;
}
</style>
</head>
<body>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
As you can see I have made items width 70% and margin auto but it doesn't center. Can someone suggest me why?
Give a specific id to parent of such item and give
text-align: center;
styling to it
Let me know if you require further help
I would like to put each semantic ui item into a segment. Whats the right way to do this in semantic ui / html? Should I put item inside segment, segment inside item, or neither?
Items
Items code:
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
Segment:
Segment code:
<div class="ui segment">
</div>
Semantic UI Items and Segments are not designed to work together (i just ran into this same issue) so my workaround was to add the requisite css to my stylesheet applied to a .ui.segment.item element (you could also place this into the scss templates and use scss variables for colors, spacing, etc. instead to compile this into a custom build of semantic-ui for your site).
So then you can apply both .item and .segment styles to those blocks that you want to have both styles (for any variations like piled or compact, you would have to include those variations as custom styles too of course).
I did it this way because the styles for a segment are fairly self contained, but the ones for an item are quite extensive, so they would be harder to reproduce accurately.
The built in code runner doesn't seem to display correctly, so here is a fiddle with the same code working correctly: https://jsfiddle.net/nw8nte4b/
```
.ui.segment.item {
position: relative;
background: #fff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 1rem 0;
padding: 1em;
border-radius: 0.25rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />
<div class="ui centered padded grid">
<div class="ten wide column">
<div class="ui items">
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```