Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Atomic Design by Brad Frost

Collapsible pre-code

a pre code collapsible container.
to expand just add the class -expand

<!-- Expanded-->
<div class="prismea-collapsible-pre-code -expand -height-200">
    <pre class="prismea-pre-code language-json"><code>{
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    <span>"Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"</span>
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}</code></pre>
  <div class="prismea-collapsible-pre-code-button ion--slot-bottom">
    <button class="prismea-button -block -light">View less</button>
  </div>
</div><br/><br/>
<!-- Collapsed-->
<div class="prismea-collapsible-pre-code -height-200">
    <pre class="prismea-pre-code language-json"><code>{
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    <span>"Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"</span>
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}</code></pre>
  <div class="prismea-collapsible-pre-code-button ion--slot-bottom">
    <button class="prismea-button -block -light">View more</button>
  </div>
</div>
//  Expanded
.prismea-collapsible-pre-code.-expand.-height-200
  pre.prismea-pre-code.language-json
    code
      | {
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    
      span "Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"
      | 
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}
  .prismea-collapsible-pre-code-button.ion--slot-bottom
    button.prismea-button.-block.-light View less
br
br
//  Collapsed
.prismea-collapsible-pre-code.-height-200
  pre.prismea-pre-code.language-json
    code
      | {
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    
      span "Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"
      | 
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}
  .prismea-collapsible-pre-code-button.ion--slot-bottom
    button.prismea-button.-block.-light View more
<nav>
  <ul class="prismea-navigation-spots">
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="First"><i class="prismea-glyph-24_dashboard"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot -selected" href="#" title="Second"><i class="prismea-glyph-24_company"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Third"><i class="prismea-glyph-24_account"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fourth"><i class="prismea-glyph-24_transfer"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fifth"><i class="prismea-glyph-24_marketing"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Sixth"><i class="prismea-glyph-24_admin"></i></a>
    </li>
    <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Seventh"><i class="prismea-glyph-24_tools"></i></a>
    </li>
  </ul>
</nav>
nav
  ul.prismea-navigation-spots
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='First')
        i.prismea-glyph-24_dashboard
    li.prismea-navigation-spots--slot
      a.prismea-spot.-selected(href='#', title='Second')
        i.prismea-glyph-24_company
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='Third')
        i.prismea-glyph-24_account
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='Fourth')
        i.prismea-glyph-24_transfer
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='Fifth')
        i.prismea-glyph-24_marketing
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='Sixth')
        i.prismea-glyph-24_admin
    li.prismea-navigation-spots--slot
      a.prismea-spot(href='#', title='Seventh')
        i.prismea-glyph-24_tools

Pagination

<div class="prismea-pagination">
  <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-left"></i></button>
  <div class="prismea-pagination--page">Page 1/42</div>
  <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
</div>
<div class="prismea-pagination">
  <button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-left"></i></button>
  <div class="prismea-pagination--page">Page 1/42</div>
  <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
</div>
<div class="prismea-pagination">
  <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-left"></i></button>
  <div class="prismea-pagination--page">Page 1/42</div>
  <button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-right"></i></button>
</div>
.prismea-pagination
  button.prismea-pagination--button
    i.prismea-glyph-12_arrow-left
  .prismea-pagination--page Page 1/42
  button.prismea-pagination--button
    i.prismea-glyph-12_arrow-right
.prismea-pagination
  button.prismea-pagination--button(disabled)
    i.prismea-glyph-12_arrow-left
  .prismea-pagination--page Page 1/42
  button.prismea-pagination--button
    i.prismea-glyph-12_arrow-right
.prismea-pagination
  button.prismea-pagination--button
    i.prismea-glyph-12_arrow-left
  .prismea-pagination--page Page 1/42
  button.prismea-pagination--button(disabled)
    i.prismea-glyph-12_arrow-right