atoms

Atoms

Read about atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Default buttons

Outline buttons

17.632

Icons

Use icons from our webfont to provide a unfied user experience.
  • Column 1 Column 2 Column 3 Column 4
    Value 1 Value 2 Value 3 Value 4
    Value 1 Value 2 Value 3 Value 4

    tag

    Example heading

    Example heading

    Example heading

    Example heading

    Example heading
    Example heading
    .tag-primary .tag-success .tag-info .tag-warning .tag-danger

    Pill tags

    .tag-pill.tag-default .tag-pill.tag-primary .tag-pill.tag-success .tag-pill.tag-info .tag-pill.tag-warning .tag-pill.tag-danger
    My tag

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    HTML
    Hypertext Markup Language

    Heading Level 1

    Heading Level 2

    Heading Level 3

    Heading Level 4

    Heading Level 5
    Heading Level 6

    This is a text link

    Strong is used to indicate strong importance

    This text has added emphasis

    The b element is stylistically different text from normal text, without any special importance

    The i element is text that is set off from the normal text

    The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

    This text is deleted and This text is inserted

    This text has a strikethrough

    Superscript®

    Subscript for things like H2O

    This small text is small for for fine print, etc.

    Abbreviation: HTML

    Keybord input: Cmd

    This text is a short inline quotation

    This is a citation

    The dfn element indicates a definition.

    The mark element indicates a highlight

    This is what inline code looks like.

    This is sample output from a computer program

    The variarble element, such as x = y

    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
      1. Consectetur adipisicing elit
      2. Consectetur adipisicing elit
    4. Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Consectetur adipisicing elit
      • Consectetur adipisicing elit
    • Lorem ipsum dolor sit amet

    A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    molecules

    Molecules

    Read about molecules

    Things start getting more interesting and tangible when we start combining atoms together. 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.

    Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

    box

    Card Header
    Card image

    Image overlay title

    Image overlay text

    Card Content
    Filter Title 1
    Filter Title 2
    Filter Title 3
    Pro Tip: Use your browsers autocompletion to fill this form more quickly.
    @

    @

    @

    Example heading

    • List item Header 1 Active

      List group item text

    • List item Header 2 Disabled

      List group item text 2

      My tag
    Dies ist ein Feature.

    App-Arena.com Styleguide

    Example heading

    Nested media heading

    Example heading

    Example heading

    The classes .float-left and .float-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.

    Media alignment

    The images or other media can be aligned top, middle, or bottom. The default is top aligned.

    Top aligned media

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Middle aligned media

    Bottom aligned media

    Example heading

    Launch modal

    Inline

    Easily space out nav links in a horizontal band with .nav-inline. Longer series of links will wrap to a new line.

    Tabs

    Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

    Pills

    Take that same HTML, but use .nav-pills instead:

    Stacked pills

    Just add .nav-stacked to the .nav.nav-pills.

    No Class
    Class
    progress-success
    Class
    progress-info
    Class
    progress-warning
    Class
    progress-danger
    20% completed - A lot to do yet :-)
    1. Step 1
    2. Step 2
    3. Step 3
    4. Step 4

    App-Arena.com Styleguide

    Server in Deutschland

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor, consetetur sadipscing elitr

    organisms

    Organisms

    Read about organisms

    Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

    We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).

    Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

    Building up from molecules to organisms encourages creating standalone, portable, reusable components.

    17632
    714
    3298

    Flexible Laufzeitverlängerung

    Lorem ipsum dolor sit amet

    Stark serviceorientiert

    consetetur sadipscing elitr, sed diam nonumy eirmod tempor

    Server in Deutschland

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor, consetetur sadipscing elitr

    Breites Produktportfolio

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Stephanie S. Walsh ,Senior Manager Ergo

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Gunda Zellweger ,Senior Manager Eventim

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Tilo Holtzer ,Senior Manager M2Beauté

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Brünhild Papke ,Senior Manager Universal Music

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Marcella Oliver ,Senior Manager

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Kilian Hirsch ,Senior Manager

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Thorsten Klages ,Senior Manager

    Titel der Kunden-Referenz

    " Haben alles SUPER gemacht, wir freuen uns auf weitere Zusammenarbeit. "


    Annett Eilerts ,Senior Manager

    SLIDE 1

    SLIDE 2

    SLIDE 3

    SLIDE 4

    • Kostenlos testen!!
    Betrugsprävention
    Zahlreiche Mechanismen zur Betrugsprävention
    Statistiken und Tracking Infos
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis ante id nibh rhoncus maximus.
    SmartLogin-Technologie
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis ante id nibh rhoncus maximus.
    Tägliche Erinnerungsfunktion
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis ante id nibh rhoncus maximus.

    templates

    Molecules

    Read about templates

    At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

    Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place. In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable. Bearded Studio in Pittsburgh follow a similar process, where designs start grayscale and layout-less but slowly increase fidelity until the final design is in place.

    Title of the task
    1. Step 1
    2. Step 2
    3. Step 3
    4. Step 4

    FORM


    Title of the task
    1. Step 1
    2. Step 2
    3. Step 3
    4. Step 4

    FORM


    pages

    Molecules

    Read about pages

    Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

    Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.

    The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

    Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.

    Fotowettbewerb buchen
    1. Basisinformationen
    2. Paket wählen
    3. Bestellung abschließen

    Wähle ein vordefiniertes Paket oder stelle deine Leistungen individuell zusammen

    1.129 € zzgl. MwSt

    Service Anspruch

    4 Service Stunden für folgende Leistungen

    • CSS Anpassungen
    • Grafik-Erstellung
    • Werbemanagement
    • Abschlussbericht
    Laufzeit 2 Monate
    Sprachen 1 Sprache
    Kanäle zur Veröffentlichung
    • Kampagnenseite
    • 1 Facebook Fanseite
    • Webseiteneinbindung
    Domain der Kampagnenseite
    • Eigene Subdomain
    • Eigene Domain
    Service Anspruch und Leistungen

    Service-Stunden

    • CSS Anpassungen ab 1 Service Stunde
    • Grafik-Erstellung ab 4 Service Stunden
    • Werbemanagement ab 10 Service Stunden
    • Abschluss-Report ab 10 Service Stunden
    Laufzeit in Monaten
    Sprachen

    Sie haben 2 Sprachen im Paket enthalten

    Weitere Sprache dazu buchen (ab 99 €)

    Kanäle zur Veröffentlichung

    Wähle über welche Kanäle die App veröffentlicht werden soll.

    Domain der Kampagnenseite
    • Eigene Subdomain (z.B. sparkasse.fotowettbewerb.de)
    • Eigene Domain (z.B. www.sparkasse-fotowettbewerb.de) Domain buchen (+199€)
    Fotowettbewerb buchen
    1. Basisinformationen
    2. Paket wählen
    3. Bestellung abschließen

    Bestellübersicht

    • Rechnungsdaten aus Zoho Books (wenn nicht vorhanden, müssen diese eingegeben werden)
    • Ja, ich akzeptiere die AGB und die Datenschutz-Bedinungen der App-Arena GmbH
    • Bestellung absenden

    Nach dem Abschluss der Bestellung, wird in Zoho Invoice automatisch eine neue Rechnung für den Kunden erstellt. In Zoho Books werden "Payment" Möglichkeiten wie Paypal und Stripe aktiviert, über die der Kunde bezahlen kann.
    Die App steht sofort und vor dem Zahlungseingang zur vollen Nutzung zur Verfügung.

    Fotowettbewerb buchen
    1. Basisinformationen
    2. Paket wählen
    3. Bestellung abschließen
    Der Kampagnen-Name hilft dir die App wiederzuerkennen.