block

Block Messages

Example usage:

Code:
<div class="blockMessage blockMessage--iconic blockMessage--highlight">
	<strong>Block message highlight with icon</strong><br>
	Content goes here
</div>

Examples:

Block message
Block message close
Block message small
Block message center
Block message highlight
Block message important
Block message success
Block message warning
Test message with an icon
Block message error
Block message highlight with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block message important with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block message success with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block message warning with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block message error with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.

Block Row Messages

Example usage:

Code:
<div class="block-rowMessage block-rowMessage--iconic block-rowMessage--highlight">
	Block row message highlight with icon
</div>

Examples:

Block row message highlight
Block row message small
Block row message center
Block row message important
Block row message success
Block row message warning
Block row message error
Block row message highlight with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message important with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message success with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message success with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message warning with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message highlight with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message warning with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.
Block row message warning with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend, mi sed laoreet euismod, mi sem faucibus magna, eu suscipit purus neque quis nisl. Proin feugiat diam bibendum sapien tempus placerat.

Block Status Messages

Example usage:

Code:
<dl class="blockStatus blockStatus--standalone">
	<dd class="blockStatus-message blockStatus-message--deleted">
		Block status with deleted icon
	</dd>
</dl>

Examples:

Block status standalone
Block status info
Block status simple
Block status with deleted icon
Block status with locked icon
Block status with moderated icon
Block status with warning icon
Block status with ignored icon

Kostenlose Lernzettel Download als PDF Abitur-Community

Zurück