Button 

<Ongoing.NodeTypes.Button:Component.Button link="#" linktext="your content" style="your style" animated="false || true" icon="your icon" iconPosition="after || before" size="sm || rg || lg" />
themeyellowaubergine-brightnightbluepurple-brightpetrolgraygray-lightgray-60gray-20
themeyellowaubergine-brightnightbluepurple-brightpetrolgraygray-lightgray-60gray-20

Image 

<Ongoing.Component.Image:Image image={props.image} ratio="1x1" object-fit="contain" rounded="rounded-circle" class="h-100 opacity-50" />
Styleguide

Accordion 

<Ongoing.NodeTypes.Accordion:Component.Accordion.Card identifierParent="accordionExample" identifierHeading="headingOne" identifierCollapse="collapseOne" title="default title" text="default text" />
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Typography 

Heading H1 h1

Heading H2 h2

Heading H3 h3

Heading H4 h4

Heading H5 h5
Heading H6 h6

fs-tiny Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-small Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-regular Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-bigger-regular Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-medium Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-large Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-small-big Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-big Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-bigger-big Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-small-huge Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

fs-huge Half anhourhad already gone bywithoutour situation changing, when our eyes were suddenly spirited from utter darkness into blinding light.

Fixed Font-Sizes Documentation

Font-Size 12px .font-size-12
Font-Size 14px .font-size-14
Font-Size 16px .font-size-16
Font-Size 18px .font-size-18
Font-Size 20px .font-size-20
Font-Size 24px .font-size-24
Font-Size 28px .font-size-28
Font-Size 32px .font-size-32
Font-Size 40px .font-size-40
Font-Size 48px .font-size-48
Font-Size 56px .font-size-56
  • Bullet List
  • Doloret sit amet
  • Pharetra Aenean Pellentesque
  1. Ordered List
  2. Doloret sit amet
  3. Pharetra Aenean Pellentesque
  • List mit BulletPoints
  • Einfache Rücksendung dank Rücksende-Etikette mit Barcodenummer
  • Kostenlose Rücksendung mit GAS-Etikette
  • Rücksendung CHF 1.50 günstiger mit Etikette «99.01»
  • List mit BulletPoints Checkliste
  • Einfache Rücksendung dank Rücksende-Etikette mit Barcodenummer
  • Kostenlose Rücksendung mit GAS-Etikette
  • Rücksendung CHF 1.50 günstiger mit Etikette «99.01»

Forms: Floating Labels 

Copy Paste from HTML from Documentation
We'll never share your email with anyone else.

Table 

Copy Paste from HTML from Documentation

Table

List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
4Someoneelse
entirely		@twitter

Backgrounds 

Alert 

<Bootstrap.Alert:Component.Alert type="primary" icon="2063"> your content </Bootstrap.Alert:Component.Alert>

Alert with Action Buttons 

<Bootstrap.Alert:Component.Alert type="primary" icon="2063">
CONTENT
<Neos.Fusion:Fragment @path="action">ACTIONS</Neos.Fusion:Fragment>
</Bootstrap.Alert:Component.Alert>

Icon 

<Post.Icon:Component.Icon name="2063" attributes.animation="spin" attributes.scale="1.5 />

Animation: cylon

Animation: cylon-vertical

Animation: spin

Animation: spin-reverse

Animation: fade

Animation: throb

Topic Teaser 

<Post.TopicTeaser:Component.TopicTeaser title="Topic Teaser" subtitle="Vero siteos et accusam iretea et justo" background="nightblue"/>

Topic Teaser
Vero siteos et accusam iretea et justo

Topic Teaser

Topic Teaser Reverse
Vero siteos et accusam iretea et justo

Topic Teaser Reverse