Horse Component HTML

horse.jsx

<div className="column is-one-third">
    <div className="card">
      <div className="card-image">
        <figure className="image is-square">
          <img src={props.imageUrl} alt={props.name} />
        </figure>
      </div>
      <div className="card-content">
        <p className="title">
          <a href={props.url}>{props.name}</a>
        </p>
        <p>
          Breed: <a href={props.breed.url}>{props.breed.name}</a>
        </p>
      </div>
      <footer className="card-footer">
        <p className="card-footer-item">
          Age:
          <br /> {props.age}
        </p>
        <p className="card-footer-item">
          Speed:
          <br /> {Math.round(props.topSpeed)}
        </p>
        <p className="card-footer-item">
          Legs:
          <br /> {props.numberOfLegs}
        </p>
      </footer>
    </div>
  </div>