How to put semantic ui items into segments in html? - html

Question

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>

Answer 1

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>
```