Style guide

Please use the following as standard for a few common inline styling via WYSIWYG.
Some of them below can be accessed via WYSIWYG buttons (such as Styles or Gear buttons). However to customize more, you need to edit the HTML manually via its source by clicking "Disable rich text" button. And add needed relevant classes manually.
Only if trouble with stale assests, visit these URL, and press F5 or CMD (CTRL) + R. Or clear browser cache manually.

Grid:

To have different column/grid widths for inline boxes, use semantic grid classes:

one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve

Float:

float-left, float-right

Center:

centered, box--centered

Icons:

Using icons with icon-white icon-bg class can make icons have BG.

bg-green, bg-blue, bg-gold, bg-red, bg-dark
 
 
<div class="icon icon-flat icon-internal_external">&nbsp;</div>
<div class="icon icon-white icon-bg icon-jobs bg-green">&nbsp;</div>

hr:







<hr />
<hr class="hr hr--one" />
<hr class="hr hr--two" />
<hr class="hr hr--three" />
<hr class="hr hr--four" />
<hr class="hr hr--five" />

box--caption float-right:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption four float-right">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption box--offset float-right:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption box--offset four float-right">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption float-left:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption four float-left">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption box--offset float-left:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption six box--offset">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption box--centered:

To make caption text centered, use text-center class.
To control the width, use the above mentioned Grid classes.

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption eight box--centered">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--quote box--offset:

Use the provided "Insert box quote" for easy insertion.
To control the width, use the above mentioned Grid classes.

Die Planung der Servicetechniker mit Excel-Tabellen wäre in diesem Umfang gar nicht mehr möglich. Mit der Einführung von mobileX-Dispatch haben wir die Effizienz unserer Einsatzplanung auf jeden Fall gesteigert. Die zentrale Steuerung hat uns zudem ermöglicht, die Gebietsgrenzen nach Postleitzahlen aufzulösen und eine optimierte Routenplanung einzuführen. Unsere Servicetechniker können sich jetzt endlich auf ihre eigentlichen Aufgaben konzentrieren, nämlich die Wartung der Geräte beim Patienten.

<blockquote class="box box--quote box--offset box--full">
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
  <div class="box__text">
    <p class="box__quote">Die Planung der Servicetechniker mit Excel-Tabellen wäre in diesem Umfang gar nicht mehr möglich. Mit der Einführung von mobileX-Dispatch haben wir die Effizienz unserer Einsatzplanung auf jeden Fall gesteigert. Die zentrale Steuerung hat uns zudem ermöglicht, die Gebietsgrenzen nach Postleitzahlen aufzulösen und eine optimierte Routenplanung einzuführen. Unsere Servicetechniker können sich jetzt endlich auf ihre eigentlichen Aufgaben konzentrieren, nämlich die Wartung der Geräte beim Patienten.</p>
    <p class="box__byline">&mdash; Imke Stoltenberg, Leiterin der IT-Systementwicklung bei der VitalAire GmbH</p>
  </div>
</blockquote>

box--quote box--quote-vertical:

To have a vertical blockquote, use class box--quote-vertical without box--offset.
To control widths, use the above mentioned grid classes.
To float the boxes, use Float classes above.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

<blockquote class="box box--quote box--quote-vertical six float-right">
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
  <div class="box__text">
    <p class="box__quote">Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt</p>
    <p class="box__byline">&mdash; Manuela Lillich, Office Managerin</p>
  </div>
</blockquote>

box--quote box--quote-vertical reversed:

To position text, simply change the order.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

<blockquote class="box box--quote box--quote-vertical six float-left">
  <div class="box__text">
    <p class="box__quote">Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt</p>
    <p class="box__byline">&mdash; Manuela Lillich, Office Managerin</p>
  </div>
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
</blockquote>

box--caption within block-grid:

To make inline multiple responsive boxes, use block-grid classes with UL element:
You can do the same for other revelant boxes, such as box--quote.
To reduce too large left and right spacing, use block-grid--wide class.
If the large- version should have the same amount as medium- version, simply remove large- because the grid uses min-width, it will work progressively.
Important! Do not add the above mentioned Grid classes (one, two, three) to the boxes since the width is now controlled by block-grid class.

block-grid medium-block-grid-2 large-block-grid-3

Note the number: "-2", "-3" (can be 1 to 12). They defines the number of columns for either small, medium or large devices.

  • Kartendarstellung durch Integration von Bing Maps in mobileX-Dispatch
  • Equipment Ein- und Ausbau im mobilen Client mobileX-MIP for Field Service
  • Anzeige von Vorgänger-Nachfolgerbeziehungen in mobileX-Dispatch
<ul class="list block-grid block-grid--wide medium-block-grid-2">
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/bing-maps_2.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/bing-maps_2.png" /></a></div>
      <div class="box__content">Kartendarstellung durch Integration von Bing Maps in mobileX-Dispatch</div>
    </div>
  </li>
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/equipment_ausbau_high_res.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/equipment_ausbau_high_res.png" /></a></div>
      <div class="box__content">Equipment Ein- und Ausbau im mobilen Client mobileX-MIP for Field Service</div>
  </div>
  </li>
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/dispatch-beziehungen_2.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/dispatch-beziehungen_2.png" /></a></div>
      <div class="box__content">Anzeige von Vorgänger-Nachfolgerbeziehungen in mobileX-Dispatch</div>
    </div>
  </li>
</ul>

box--collapse with adjustable width:

To have different widths, please add relevant grid classes eight, nine, ten, eleven, twelveinto box__constrained element., not box. As otherwise shrinked.This box is available under the editor cog icon under Insert box collpase menu item.

Example #1:

This one has class box__constrained ten.

Historie

Im Jahre 2000 gegründet ist die mobileX AG ein inhabergeführtes Unternehmen mit Firmen- und Entwicklungssitz in München.
Als der etablierte Anbieter von Field Service Management-Lösungen unterstützt die mobileX AG ihre Kunden in 27 Ländern mit umfassender Prozess- und Branchenkompetenz sowie flexiblen und ausgereiften Lösungen. Besonderen Wert legt die mobileX AG auf einen ganzheitlichen Lösungsansatz.
Dieser beginnt bei der Analyse der Prozesse und des Bedarfs (Requirement Engineering) und erstreckt sich über die Konzeption und Implementierung der Standardlösungen bis hin zu Betrieb und Support.

Im Jahre 2000 gegründet ist die mobileX AG ein inhabergeführtes Unternehmen mit Firmen- und Entwicklungssitz in München.
Als der etablierte Anbieter von Field Service Management-Lösungen unterstützt die mobileX AG ihre Kunden in 27 Ländern mit umfassender Prozess- und Branchenkompetenz sowie flexiblen und ausgereiften Lösungen. Besonderen Wert legt die mobileX AG auf einen ganzheitlichen Lösungsansatz.
Dieser beginnt bei der Analyse der Prozesse und des Bedarfs (Requirement Engineering) und erstreckt sich über die Konzeption und Implementierung der Standardlösungen bis hin zu Betrieb und Support.

 

Example #2:

This one has class box__constrained eight.

Aufsichtsrat

Der Aufsichtsrat der mobileX AG setzt sich aus erfahrenen Experten aus den Bereichen Personal, Vertrieb und Security zusammen. Er Liquiasp erspero dolupta volo tem ium quatus quassi rerum sundit pro tes dolupta quamet fuga. Emquae con et venisim poriate nihitem con cullibus dolupid quia plaut ut officil ignihicatet vel int reici cumet essum fuga. Pa dolore re paris eos modisi officit eneceptatem eos exeria nimus debis dus, occus dolorro magnatus dolore, enimento to volorup taspero beatur?

Der Aufsichtsrat der mobileX AG setzt sich aus erfahrenen Experten aus den Bereichen Personal, Vertrieb und Security zusammen. Er Liquiasp erspero dolupta volo tem ium quatus quassi rerum sundit pro tes dolupta quamet fuga. Emquae con et venisim poriate nihitem con cullibus dolupid quia plaut ut officil ignihicatet vel int reici cumet essum fuga. Pa dolore re paris eos modisi officit eneceptatem eos exeria nimus debis dus, occus dolorro magnatus dolore, enimento to volorup taspero beatur?

 
<div class="box box--collapse box--clean box--centered clearfix">
<div class="box__constrained ten">
<h2 class="box__title">Historie</h2>

<div class="box__content">
<div class="box__text">
<p>Im Jahre 2000 gegründet ist die mobileX AG ein inhabergeführtes Unternehmen mit Firmen- und Entwicklungssitz in München.<br />
Als der etablierte Anbieter von Field Service Management-Lösungen unterstützt die mobileX AG ihre Kunden in 27 Ländern mit umfassender Prozess- und Branchenkompetenz sowie flexiblen und ausgereiften Lösungen. Besonderen Wert legt die mobileX AG auf einen ganzheitlichen Lösungsansatz.<br />
Dieser beginnt bei der Analyse der Prozesse und des Bedarfs (Requirement Engineering) und erstreckt sich über die Konzeption und Implementierung der Standardlösungen bis hin zu Betrieb und Support.</p>
</div>

<div class="box__hidden element-invisible">
<p>Im Jahre 2000 gegründet ist die mobileX AG ein inhabergeführtes Unternehmen mit Firmen- und Entwicklungssitz in München.<br />
Als der etablierte Anbieter von Field Service Management-Lösungen unterstützt die mobileX AG ihre Kunden in 27 Ländern mit umfassender Prozess- und Branchenkompetenz sowie flexiblen und ausgereiften Lösungen. Besonderen Wert legt die mobileX AG auf einen ganzheitlichen Lösungsansatz.<br />
Dieser beginnt bei der Analyse der Prozesse und des Bedarfs (Requirement Engineering) und erstreckt sich über die Konzeption und Implementierung der Standardlösungen bis hin zu Betrieb und Support.</p>
</div>
</div>

<div class="box__toggle">&nbsp;</div>
</div>
</div>

boxes--bordered with adjustable width:

To have different widths, please add relevant grid classes eight, nine, ten, eleven, twelveinto box__constrained element., not box. As otherwise shrinked.This box is available under the editor cog icon under Insert box collpase menu item.

To have different amount of columns, please change small-block-grid-1 medium-block-grid-3 large-block-grid-3 classes accordingly. Also be sure to provide the actual small boxes by cloning the existing ones starting from LI element: <li class="box">This is box content....

To have rounded images cropped automatically by Drupal, choose Image style rounded AND if using Media browser, be sure to ALSO select rounded under Display as.

Vorstand

  • Hannes Heckner, CEO

    Hannes Heckner (Jahrgang 1970) gründete bereits während seines Studiums der Informatik an der TU München ein Unternehmen aus der.

  • Holger Schif, CTO

    Holger Schif (Jahrgang 1968) begann seine berufliche Karriere bei der IXOS AG als Software-Entwickler.

  • Matthias Stöcklein, COO

    Matthias Stöcklein (Jahrgang 1979) begann seine Karriere 2005 bei der cirquent GmbH.

Note the following classes: boxes boxes--flex boxes--clean boxes--bordered boxes--centered clearfix and boxes__constrained twelve. Change twelve into eight to shrink it.

<div class="boxes boxes--flex boxes--clean boxes--bordered boxes--centered clearfix">
<div class="boxes__constrained twelve">
<h2 class="boxes__title">Vorstand</h2>

<div class="boxes__content">
<ul class="block-grid block-grid--flex small-block-grid-1 medium-block-grid-3 large-block-grid-3">
<li class="box">
<div class="box__content">
<div class="box__image">This is image here...</div>

<div class="box__text">
<h3 class="box__title">Hannes Heckner, CEO</h3>

<p>Hannes Heckner (Jahrgang 1970) gründete bereits während seines Studiums der Informatik an der TU München ein Unternehmen aus der.</p>
</div>

<div class="box__btn"><a class="button read-more" href="#">Mehr erfahren</a></div>
</div>
</li>
<li class="box">
<div class="box__content">
<div class="box__image">This is image here...</div>

<div class="box__text">
<h3 class="box__title">Holger Schif, CTO</h3>

<p>Holger Schif (Jahrgang 1968) begann seine berufliche Karriere bei der IXOS AG als Software-Entwickler.</p>
</div>

<div class="box__btn"><a class="button read-more" href="#">Mehr erfahren</a></div>
</div>
</li>
<li class="box">
<div class="box__content">
<div class="box__image">This is image here...</div>

<div class="box__text">
<h3 class="box__title">Matthias Stöcklein, COO</h3>

<p>Matthias Stöcklein (Jahrgang 1979) begann seine Karriere 2005 bei der cirquent GmbH.</p>
</div>

<div class="box__btn"><a class="button read-more" href="#">Mehr erfahren</a></div>
</div>
</li>
</ul>
</div>
</div>
</div>