Overview

Katana ist ein hoch modulares System für effizientes Webdesign und -prototyping. Es basiert auf unterschiedliche Komponenten, die zu komplexen Layouts kombiniert werden können. Alle Komponenten werden in Ihren Varianten und Szenarien abgebildet.


Atome

Alert

Heads up! This alert needs your attention, but it's not super important.
Success! This alert needs your attention and shows a successfull task.
Warning! This alert needs your attention and it shows a warning.
Error! This alert needs your attention and it shows an error message.
Details ansehen

Avatar

AW

Details ansehen

Badge

Default Primary Success Info Warning Danger
1 2 3 4 5 6
Details ansehen

Blockquote

Some quick example text to build on the card title and make up the bulk of the card's content. www.raatid.net
Details ansehen

Breadcrumb

Details ansehen

Button

A Href
Details ansehen

Divider


Details ansehen

Dropdown

Details ansehen

Form Checkbox

Details ansehen

Form File

Details ansehen

Form Label

Details ansehen

Form Radio

Details ansehen

Form Select

Details ansehen

Form Text

Details ansehen

Form Textarea

Details ansehen

Headline

Display 1

Display 2

Display 3

Display 4

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Details ansehen

Helper Icon

Details ansehen

Image

Details ansehen

List Item

  • List Item
  • Details ansehen

    Logo

    Details ansehen

    Nav Item

    Details ansehen

    Navbar Toggler

    Details ansehen

    Pagination Item

    Details ansehen

    Paragraph

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

    You can use the mark tag to highlight text.
    This line of text is meant to be treated as deleted text.
    This line of text is meant to be treated as no longer accurate.
    This line of text is meant to be treated as an addition to the document.
    This line of text will render as underlined
    This line of text is meant to be treated as fine print.
    This line rendered as bold text.
    This line rendered as italicized text.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

    Details ansehen

    Progress Bar

    Details ansehen

    Section

    Section content
    Section content
    Section content
    Section content
    Section content
    Details ansehen

    Moleküle

    Accordion

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    Details ansehen

    Card

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somehere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somehere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Details ansehen

    Form Group

    Details ansehen

    Input Group

    @
    Details ansehen

    List Group

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    Details ansehen

    Nav

    Details ansehen

    Pagination

    Details ansehen

    Progress

    Details ansehen

    Slide

    Slider Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    let's go
    Details ansehen

    Teaser

    Teaser Headline

    Lorem ipsum dolor sit amet.

    Call to Action

    Teaser Headline

    Lorem ipsum dolor sit amet.

    Call to Action

    Teaser Headline

    Lorem ipsum dolor sit amet.

    Call to Action
    Details ansehen

    Organismen

    Card Group

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Header

    My fancy headline

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Details ansehen

    Footer

    Details ansehen

    Form Contact

    Details ansehen

    Header

    Details ansehen

    Jumbotron

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    los geht's
    Details ansehen

    Navbar

    Details ansehen

    Slider

    Slider Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    let's go

    Another Headline

    Slider Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    let's go

    Slider Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    let's go
    Details ansehen