Semantic UI sandbox

horizontal card

by ikesela

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class="ui basic segment">


  <div class="ui card horizontal">
    <div class="image">
      <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
    </div>
    <div class="content">
      <a class="header">Kristy</a>
      <div class="meta">
        <span class="date">Joined in 2013</span>
      </div>
      <div class="description">
        Kristy is an art director living in New York.
      </div>
    </div>
  </div>
</div>

CSS

.ui.card.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  min-width: 400px;
  width: 500;
}

.ui.card.horizontal>.image {
  border-radius: 0;
  width: 150px;
}

.ui.card.horizontal>.image>img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

JavaScript

// Add javascript here