7 #set Set

Sets are used to render collections of similar elements.

Source: scss/components/set/_set.scss, line 1

7.1 #set.basic Basic Set

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A set is a collection of related elements, that are primarily used to give an overview and link to the details of each entry.

Example
Germany, Switzerland
Germany, Switzerland
Germany, Switzerland
Markup
<div class="set">
  <div class="set__item">
    <div class="set__item-title"><a href="#!">Senior Software Engineer</a></div>
    <div class="set__item-text">Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <div class="set__item-title"><a href="#!">Senior Software Engineer</a></div>
    <div class="set__item-text">Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <div class="set__item-title"><a href="#!">Senior Software Engineer</a></div>
    <div class="set__item-text">Germany, Switzerland</div>
  </div>
</div>
Source: scss/components/set/_set.scss, line 11
Example
John Doe
John Doe
CEO
Germany, Switzerland
John Doe
John Doe
CMO
Germany, Switzerland
John Doe
John Doe
CFO
Germany, Switzerland
John Doe
John Doe
CTO
Germany, Switzerland
John Doe
John Doe
CXO
Germany, Switzerland
John Doe
John Doe
CXO
Germany, Switzerland
John Doe
John Doe
CXO
Germany, Switzerland
Markup
<div class="set set--portrait">
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CEO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CMO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CFO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CTO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CXO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CXO<br>Germany, Switzerland</div>
  </div>
  <div class="set__item">
    <img class="set__item-portrait" src="demo-images/portrait-01.jpg" alt="John Doe">
    <div class="set__item-title">John Doe</div>
    <div class="set__item-subtitle">CXO<br>Germany, Switzerland</div>
  </div>
</div>
Source: scss/components/set/_set.scss, line 49