/*

Info Sheet

Info Sheet is simply designed for displaying key-value-paired data. It's only for plain
text data and you should never try to embed any other compoents in it, except badges.
It's great for showing something like a ticket or pass. Also make sure that your key
should be concise; Longer key may result in a ugly multiline label.

Markup: infosheet.html

Styleguide Components - Info Sheet

*/

.hola-infosheet-row {
  display: block;
  line-height: 1.5;
}
.hola-infosheet-row::after {
  content: '';
  clear: both;
  display: table;
}

.hola-infosheet-row > * {
  box-sizing: border-box;
}

.hola-infosheet-row .hola-infosheet-key {
  display: inline-block;
  width: 30%;
  padding-right: .5em;
  font-weight: bold;
  text-align: right;
}

.hola-infosheet-row .hola-infosheet-value {
  width: 70%;
  padding-left: .5em;
  float: right;
}