Atomic Design

Molecules

Molecules are small functional components that could stand alone but are usually combined into Organisms. (Forms, Navigation, Buttons, Blocks, Lists, Blockquotes, Pullquotes, Embeds, etc.)

Forms









    Option One (1)

    Navigation

    [coming soon]

    Buttons

    Primary Button
    Primary Button
    Secondary Button
    Secondary Button
    Icon Button
    Icon Button
    Line Button
    Line Button

    Blocks

    Media & Text Block

    Media & Text Block

    Duis rutrum euismod convallis. Quisque placerat libero ac nulla consectetur, vitae pellentesque enim semper. Proin maximus dignissim lacinia. Etiam vulputate auctor nisi, id commodo ante. Nam convallis interdum consequat. In interdum condimentum euismod. Quisque sit amet leo vel odio semper pharetra tempus et leo.

    TEST
    Media & Text Block (alternate)

    Media & Text Block

    Duis rutrum euismod convallis. Quisque placerat libero ac nulla consectetur, vitae pellentesque enim semper. Proin maximus dignissim lacinia. Etiam vulputate auctor nisi, id commodo ante.

    [more coming soon]

    Lists

    1. List Item A
    2. List Item B
    3. List Item C
      • Nested List Item
    4. List Item D

    Pullquote

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et.

    ~ Sed Tempus

    Blockquote

    Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna.

    ~ Dolorem Aliquam

    Embeds

    YouTube
    Vimeo
    Spotify

    Details

    Default Accordion (click to expand)

    Sed eget arcu nec nisl facilisis cursus. Praesent et porttitor arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elementum dapibus faucibus. Aliquam ipsum tortor, lobortis sed sapien nec, sodales ultrices nunc. Phasellus varius porta tristique. Nulla sed eros a orci dignissim condimentum id at arcu. Etiam in sapien a purus finibus iaculis. Praesent pharetra massa ut quam venenatis placerat. Mauris ac nulla sit amet sapien vestibulum placerat ut quis ligula. Nullam a pharetra dui. Vestibulum porttitor nibh et bibendum volutpat. Mauris lectus mi, varius eu pretium sed, cursus cursus augue. Suspendisse at mi eros. Proin hendrerit, lacus scelerisque laoreet laoreet, dui risus mattis est, at porttitor ante risus eget elit. Curabitur porta mollis sagittis.

    Surfaces

    Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it. The higher the elevation value, the more diffused the shadow becomes and we have 8 levels to choose from.

    class: bjw-surface-l1

    box-shadow: 0px 3px 6px 0px rgba($color: $Black, $alpha: 0.16);

    class: bjw-surface-l2

    box-shadow: 0px 12px 18px 0px rgba($color: $Black, $alpha: 0.16);

    class: bjw-surface-l3

    box-shadow: 0px 18px 24px 0px rgba($color: $Black, $alpha: 0.16);

    class: bjw-surface-l4

    box-shadow: 0px 24px 30px 0px rgba($color: $Black, $alpha: 0.16);