Fight Card

The Fight Card component has three modifier classes: --main-card, --post, and --winner. The first two classes are applied to the top-level fight-card container. The --winner class is applied to the winning fighter: fighter-left or fighter-right.

Main Fight Card Pre Fight

Deontay
Wilder
36 - 0 - 0
win
vs
Artur
Szpilka
20 - 1 - 0
loss
30
Age
26
Tuscaloosa, Alabama
Origin
Wieliczha, Poland
6’ 7”
Height
6’ 3”
83”
Reach
77” 
<div class="fight-card fight-card--main-card">
  <header class="fight-card__header">
      <div class="fight-card__fighter-left">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-1022_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Deontay
            </div>
            <div class="fight-card__fighter-last-name">
                Wilder
            </div>
            <div class="fight-card__fighter-record">
                36 - 0 - 0
            </div>
            <div class="fight-card__fighter-result">
                win
            </div>
        </div>
    </div>
    <div class="fight-card__vs-circle"></div>
    <div class="fight-card__row">
         vs
    </div>
      <div class="fight-card__fighter-right">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-25_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Artur
            </div>
            <div class="fight-card__fighter-last-name">
                Szpilka
            </div>
            <div class="fight-card__fighter-record">
                20 - 1 - 0
            </div>
            <div class="fight-card__fighter-result">
                loss
            </div>
        </div>
    </div>
  </header>
  <section class="fight-card__body">
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              30
          </div>
          <div class="fight-card__fighter-center">
              Age
          </div>
          <div class="fight-card__fighter-right">
              26
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              Tuscaloosa, Alabama
          </div>
          <div class="fight-card__fighter-center">
              Origin
          </div>
          <div class="fight-card__fighter-right">
              Wieliczha, Poland
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              6’ 7”
          </div>
          <div class="fight-card__fighter-center">
              Height
          </div>
          <div class="fight-card__fighter-right">
              6’ 3”
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              83”
          </div>
          <div class="fight-card__fighter-center">
              Reach
          </div>
          <div class="fight-card__fighter-right">
              77”
          </div>
      </div>
  </section>
  <footer class="fight-card__footer">
    <div class="fight-card__shostreak">
        <a class="fight-card__shostreak-link" href="#"><div class="fight-card__shostreak-logo"></div><span>SHOSTREAK</span></a>
    </div>
    <div class="fight-card__tune-in">
        On Showtime at 10pm
    </div>
</footer>
</div>

Fight Card Pre Fight

Deontay
Wilder
36 - 0 - 0
win
vs
Artur
Szpilka
20 - 1 - 0
loss
30
Age
26
Tuscaloosa, Alabama
Origin
Wieliczha, Poland
6’ 7”
Height
6’ 3”
83”
Reach
77” 
<div class="fight-card">
  <header class="fight-card__header">
      <div class="fight-card__fighter-left">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-1022_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Deontay
            </div>
            <div class="fight-card__fighter-last-name">
                Wilder
            </div>
            <div class="fight-card__fighter-record">
                36 - 0 - 0
            </div>
            <div class="fight-card__fighter-result">
                win
            </div>
        </div>
    </div>
    <div class="fight-card__vs-circle"></div>
    <div class="fight-card__row">
         vs
    </div>
      <div class="fight-card__fighter-right">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-25_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Artur
            </div>
            <div class="fight-card__fighter-last-name">
                Szpilka
            </div>
            <div class="fight-card__fighter-record">
                20 - 1 - 0
            </div>
            <div class="fight-card__fighter-result">
                loss
            </div>
        </div>
    </div>
  </header>
  <section class="fight-card__body">
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              30
          </div>
          <div class="fight-card__fighter-center">
              Age
          </div>
          <div class="fight-card__fighter-right">
              26
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              Tuscaloosa, Alabama
          </div>
          <div class="fight-card__fighter-center">
              Origin
          </div>
          <div class="fight-card__fighter-right">
              Wieliczha, Poland
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              6’ 7”
          </div>
          <div class="fight-card__fighter-center">
              Height
          </div>
          <div class="fight-card__fighter-right">
              6’ 3”
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              83”
          </div>
          <div class="fight-card__fighter-center">
              Reach
          </div>
          <div class="fight-card__fighter-right">
              77”
          </div>
      </div>
  </section>
  <footer class="fight-card__footer">
    <div class="fight-card__shostreak">
        <a class="fight-card__shostreak-link" href="#"><div class="fight-card__shostreak-logo"></div><span>SHOSTREAK</span></a>
    </div>
    <div class="fight-card__tune-in">
        On Showtime at 10pm
    </div>
  </footer>
</div>

Fight Card Post Fight

Deontay
Wilder
36 - 0 - 0
win
vs
Artur
Szpilka
20 - 1 - 0
loss
30
Age
26
Tuscaloosa, Alabama
Origin
Wieliczha, Poland
6’ 7”
Height
6’ 3”
83”
Reach
77” 
<div class="fight-card fight-card--main-card fight-card--post">
  <header class="fight-card__header">
      <div class="fight-card__fighter-left fight-card--winner">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-1022_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Deontay
            </div>
            <div class="fight-card__fighter-last-name">
                Wilder
            </div>
            <div class="fight-card__fighter-record">
                36 - 0 - 0
            </div>
            <div class="fight-card__fighter-result">
                win
            </div>
        </div>
    </div>
    <div class="fight-card__vs-circle"></div>
    <div class="fight-card__row">
         vs
    </div>
      <div class="fight-card__fighter-right">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-25_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Artur
            </div>
            <div class="fight-card__fighter-last-name">
                Szpilka
            </div>
            <div class="fight-card__fighter-record">
                20 - 1 - 0
            </div>
            <div class="fight-card__fighter-result">
                loss
            </div>
        </div>
    </div>
  </header>
  <section class="fight-card__body">
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              30
          </div>
          <div class="fight-card__fighter-center">
              Age
          </div>
          <div class="fight-card__fighter-right">
              26
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              Tuscaloosa, Alabama
          </div>
          <div class="fight-card__fighter-center">
              Origin
          </div>
          <div class="fight-card__fighter-right">
              Wieliczha, Poland
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              6’ 7”
          </div>
          <div class="fight-card__fighter-center">
              Height
          </div>
          <div class="fight-card__fighter-right">
              6’ 3”
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              83”
          </div>
          <div class="fight-card__fighter-center">
              Reach
          </div>
          <div class="fight-card__fighter-right">
              77”
          </div>
      </div>
  </section>
  <footer class="fight-card__footer">
    <div class="fight-card__shostreak">
        <a class="fight-card__shostreak-link" href="#"><div class="fight-card__shostreak-logo"></div><span>SHOSTREAK</span></a>
    </div>
    <div class="fight-card__tune-in">
        On Showtime at 10pm
    </div>
  </footer>
</div>

Fight Card Post Fight - draw

Deontay
Wilder
36 - 0 - 0
draw
vs
Artur
Szpilka
20 - 1 - 0
draw
30
Age
26
Tuscaloosa, Alabama
Origin
Wieliczha, Poland
6’ 7”
Height
6’ 3”
83”
Reach
77” 
<div class="fight-card fight-card--main-card fight-card--post">
  <header class="fight-card__header">
      <div class="fight-card__fighter-left">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-1022_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Deontay
            </div>
            <div class="fight-card__fighter-last-name">
                Wilder
            </div>
            <div class="fight-card__fighter-record">
                36 - 0 - 0
            </div>
            <div class="fight-card__fighter-result">
                draw
            </div>
        </div>
    </div>
    <div class="fight-card__vs-circle"></div>
    <div class="fight-card__row">
         vs
    </div>
      <div class="fight-card__fighter-right">
        <img class="fight-card__fighter-photo" src="https://www.sho.com/site/image-bin/images/46_0_0/46_0_0_f-25_88x88.jpg">
        <div class="fight-card__fighter-name-record">
            <div class="fight-card__fighter-first-name">
                Artur
            </div>
            <div class="fight-card__fighter-last-name">
                Szpilka
            </div>
            <div class="fight-card__fighter-record">
                20 - 1 - 0
            </div>
            <div class="fight-card__fighter-result">
                draw
            </div>
        </div>
    </div>
  </header>
  <section class="fight-card__body">
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              30
          </div>
          <div class="fight-card__fighter-center">
              Age
          </div>
          <div class="fight-card__fighter-right">
              26
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              Tuscaloosa, Alabama
          </div>
          <div class="fight-card__fighter-center">
              Origin
          </div>
          <div class="fight-card__fighter-right">
              Wieliczha, Poland
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              6’ 7”
          </div>
          <div class="fight-card__fighter-center">
              Height
          </div>
          <div class="fight-card__fighter-right">
              6’ 3”
          </div>
      </div>
      <div class="fight-card__row">
          <div class="fight-card__fighter-left">
              83”
          </div>
          <div class="fight-card__fighter-center">
              Reach
          </div>
          <div class="fight-card__fighter-right">
              77”
          </div>
      </div>
  </section>
  <footer class="fight-card__footer">
    <div class="fight-card__shostreak">
        <a class="fight-card__shostreak-link" href="#"><div class="fight-card__shostreak-logo"></div><span>SHOSTREAK</span></a>
    </div>
    <div class="fight-card__tune-in">
        On Showtime at 10pm
    </div>
  </footer>
</div>