Core

Pre-baked components, objects, utilities and more. Ships with Moxie core.

Media Object Jump to Source

Simple, reusable object for placing images and content side-by-side.

.o-media

Default Appearance.
Media Object Image
Hello, world!

.o-media--small

"Small" Modifier. Reduces spacing between image and body.
Media Object Image
Hello, world!

.o-media--large

"Large" Modifier. Increases spacing between image and body.
Media Object Image
Hello, world!

.o-media--flush

"Flush" Modifier. Removes spacing between image and body.
Media Object Image
Hello, world!

.o-media--reversed

"Reversed" Modifier. Reverses the position of the image and body.
Media Object Image
Hello, world!
Source 
<div class="o-media [modifier class]">
  <div class="o-media__image">
    <img 
      src="data:image/jpeg;base64,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"
      width="160"
      height="120"
      alt="Media Object Image"
    />
  </div>
  <div class="o-media__body">
    <em>Hello, world!</em>
  </div>
</div>

Table Jump to Source

Simple object for manipulating HTML tables.

.o-table

Default Appearance.
Name Role
Roger Daltrey Lead and Backing Vocals
Pete Townshend Lead and Backing Guitar
John Entwistle Bass Guitar
Keith Moon Drums

.o-table--bordered

"Bordered" Modifier. Applies a border style to the table.
Name Role
Roger Daltrey Lead and Backing Vocals
Pete Townshend Lead and Backing Guitar
John Entwistle Bass Guitar
Keith Moon Drums

.o-table--striped

"Striped" Modifier. Applies an odd-even stripe style to the table.
Name Role
Roger Daltrey Lead and Backing Vocals
Pete Townshend Lead and Backing Guitar
John Entwistle Bass Guitar
Keith Moon Drums

.o-table--fixed

"Fixed" Modifier. Applies a fixed width style to the table.
Name Role
Roger Daltrey Lead and Backing Vocals
Pete Townshend Lead and Backing Guitar
John Entwistle Bass Guitar
Keith Moon Drums

.o-table--fullwidth

"Fullwidth" Modifier. Ensures the table display at full width, based on the parent.
Name Role
Roger Daltrey Lead and Backing Vocals
Pete Townshend Lead and Backing Guitar
John Entwistle Bass Guitar
Keith Moon Drums
Source 
<table class="o-table [modifier class]">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Roger Daltrey</td>
      <td>Lead and Backing Vocals</td>
    </tr>
    <tr>
      <td>Pete Townshend</td>
      <td>Lead and Backing Guitar</td>
    </tr>
    <tr>
      <td>John Entwistle</td>
      <td>Bass Guitar</td>
    </tr>
    <tr>
      <td>Keith Moon</td>
      <td>Drums</td>
    </tr>
  </tbody>
</table>

UI List Jump to Source

Clean lists when using the list element for components.

.o-ui-list

Default Appearance.
  • Roger Daltrey
  • Pete Townshend
  • John Entwistle
  • Keith Moon

.o-ui-list--inline

"Inline" Modifier. Displays the list items inline.
  • Roger Daltrey
  • Pete Townshend
  • John Entwistle
  • Keith Moon
Source 
<ul class="o-ui-list [modifier class]">
  <li class="o-ui-list__item">Roger Daltrey</li>
  <li class="o-ui-list__item">Pete Townshend</li>
  <li class="o-ui-list__item">John Entwistle</li>
  <li class="o-ui-list__item">Keith Moon</li>
</ul>
Page Generated: Fri, Sep 10, 2021 at 10:56:44 AM