carbon-components/html/module/module.html

Carbon Components is a component library for IBM Cloud

<div class="bx--module bx--module--double">
  <div class="bx--module__inner">
    <div class="bx--module__header">
      <p class="bx--module__title bx--type-alpha">Example header</p>
    </div>
    <div class="bx--module__content">
      <p>
        Example content
      </p>
    </div>
  </div>
</div>
<div class="bx--module bx--module--single">
  <div class="bx--module__inner">
    <div class="bx--module__header">
      <p class="bx--module__title bx--type-alpha">Example header</p>
    </div>
    <div class="bx--module__content bx--module__content--centered">
      <p>
        Example centered content
      </p>
    </div>
  </div>
</div>
<div class="bx--module bx--module--single">
  <div class="bx--module__inner">
    <div class="bx--module__header">
      <p class="bx--module__title bx--type-alpha">Example header</p>
    </div>
    <div class="bx--module__content bx--module__content--scrollable">
      <p>
        Example scrollable content.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
        dui quam elementum metus, in porta ex elit sed augue.
      </p>
      <p>
        Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque posuere libero id nisi aliquam, sed iaculis ligula fringilla.
        Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet
        non sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices.
        Curabitur urna felis, mollis feugiat elementum vel, ultricies quis neque.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
        dui quam elementum metus, in porta ex elit sed augue. Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque
        posuere libero id nisi aliquam, sed iaculis ligula fringilla.
      </p>
      <p>
        Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet non
        sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices. Curabitur
        urna felis, mollis feugiat elementum vel, ultricies quis neque.
      </p>
    </div>
  </div>
</div>
<div class="bx--module bx--module--double">
  <div class="bx--module__inner">
    <div class="bx--module__content bx--module__content--centered">
      <p>
        Example centered content without header
      </p>
    </div>
  </div>
</div>
<div class="bx--module bx--module--single">
  <div class="bx--module__inner">
    <div class="bx--module__content">
      <p>
        Example content without header
      </p>
    </div>
  </div>
</div>