Styleguide

Speech Bubble

Default (Left-facing)

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

.speech-bubble.speech-bubble--left
  .speech-bubble__body
    %p
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
<div class='speech-bubble speech-bubble--left'>
  <div class='speech-bubble__body'>
    <p>
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
    </p>
  </div>
</div>

Right-facing

Communication is not possible. The shuttle has no power. Using the gravitational pull of a star to slingshot back in time? We are going to Starbase Montgomery for Engineering consultations prompted by minor read-out anomalies. Probes have recorded unusual levels of geological activity in all five planetary systems. Assemble a team. Look at records of the Drema quadrant. Would these scans detect artificial transmissions as well as natural signals?

.speech-bubble.speech-bubble--right
  .speech-bubble__body
    %p
      Communication is not possible. The shuttle has no power. Using the gravitational pull of
      a star to slingshot back in time? We are going to Starbase Montgomery for Engineering
      consultations prompted by minor read-out anomalies. Probes have recorded unusual levels
      of geological activity in all five planetary systems. Assemble a team. Look at records
      of the Drema quadrant. Would these scans detect artificial transmissions as well as
      natural signals?
<div class='speech-bubble speech-bubble--right'>
  <div class='speech-bubble__body'>
    <p>
      Communication is not possible. The shuttle has no power. Using the gravitational pull of
      a star to slingshot back in time? We are going to Starbase Montgomery for Engineering
      consultations prompted by minor read-out anomalies. Probes have recorded unusual levels
      of geological activity in all five planetary systems. Assemble a team. Look at records
      of the Drema quadrant. Would these scans detect artificial transmissions as well as
      natural signals?
    </p>
  </div>
</div>

Left-Facing with A Speaker

something special

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

.speech-bubble.speech-bubble--left
  .speech-bubble__speaker
    %img{alt: "something special", src: "//placehold.it/120/f1f2f4/36373E"}/
  .speech-bubble__body
    %p
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
<div class='speech-bubble speech-bubble--left'>
  <div class='speech-bubble__speaker'>
    <img alt='something special' src='//placehold.it/120/f1f2f4/36373E'>
  </div>
  <div class='speech-bubble__body'>
    <p>
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
    </p>
  </div>
</div>

Right-Facing with A Speaker

something special

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

.speech-bubble.speech-bubble--right
  .speech-bubble__speaker
    %img{alt: "something special", src: "//placehold.it/120/f1f2f4/36373E"}/
  .speech-bubble__body
    %p
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
<div class='speech-bubble speech-bubble--right'>
  <div class='speech-bubble__speaker'>
    <img alt='something special' src='//placehold.it/120/f1f2f4/36373E'>
  </div>
  <div class='speech-bubble__body'>
    <p>
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
    </p>
  </div>
</div>

Left-Facing with A Round Speaker

something special

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

.speech-bubble.speech-bubble--left
  .speech-bubble__speaker.speech-bubble__speaker--round
    %img.avatar__content{alt: "something special", src: "//placehold.it/120/f1f2f4/36373E"}/
  .speech-bubble__body
    %p
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
<div class='speech-bubble speech-bubble--left'>
  <div class='speech-bubble__speaker speech-bubble__speaker--round'>
    <img alt='something special' class='avatar__content' src='//placehold.it/120/f1f2f4/36373E'>
  </div>
  <div class='speech-bubble__body'>
    <p>
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
    </p>
  </div>
</div>

Right-Facing with A Round Speaker

something special

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

.speech-bubble.speech-bubble--right
  .speech-bubble__speaker.speech-bubble__speaker--round
    %img{alt: "something special", src: "//placehold.it/120/f1f2f4/36373E"}/
  .speech-bubble__body
    %p
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
<div class='speech-bubble speech-bubble--right'>
  <div class='speech-bubble__speaker speech-bubble__speaker--round'>
    <img alt='something special' src='//placehold.it/120/f1f2f4/36373E'>
  </div>
  <div class='speech-bubble__body'>
    <p>
      I have reset the sensors to scan for frequencies outside the usual range. By emitting
      harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of
      the resonators. He has this ability of instantly interpreting and extrapolating any
      verbal communication he hears. It may be due to the envelope over the structure, causing
      hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that
      bubble against our phasers.
    </p>
  </div>
</div>