Alert

Infomation

You can close me too, and I close using a Motion UI animation.

확인

Infomation

You can close me too, and I close using a Motion UI animation.

확인

Infomation

You can close me too, and I close using a Motion UI animation.

확인

코드보기

<div class="nd-alert nd-alert-block">
	<h1 class="nd-alert-title">Infomation</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button secondary expanded">확인</a></div>
</div>

<div class="nd-alert">
	<div class="nd-alert-header text-center">
		<div class="nd-alert-title">Infomation</div>
	</div>
	<div class="nd-alert-block">
		<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
		<div><a href="#link" class="button secondary expanded">확인</a></div>
	</div>
</div>

<div class="nd-alert">
	<div class="nd-alert-header text-center">
		<div class="nd-alert-title">Infomation</div>
	</div>
	<div class="nd-alert-block">
		<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	</div>
	<div class="nd-alert-footer text-center"><a href="#link" class="button secondary expanded">확인</a></div>
</div>

Infomation

You can close me too, and I close using a Motion UI animation.

확인

Success

You can close me too, and I close using a Motion UI animation.

확인

Warning

You can close me too, and I close using a Motion UI animation.

확인

Error

You can close me too, and I close using a Motion UI animation.

확인

Cancel

You can close me too, and I close using a Motion UI animation.

확인

코드보기

<div class="nd-alert nd-alert-infomation nd-alert-block m-b-1">
	<div class="nd-alert-icon"><i class="fa fa-info fa-fw"></i></div>
	<h1 class="nd-alert-title">Infomation</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button expanded">확인</a></div>
</div>

<div class="nd-alert nd-alert-success nd-alert-block m-b-1">
	<div class="nd-alert-icon"><i class="fa fa-check fa-fw"></i></div>
	<h1 class="nd-alert-title">Success</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button success expanded">확인</a></div>
</div>

<div class="nd-alert nd-alert-warning nd-alert-block m-b-1">
	<div class="nd-alert-icon"><i class="fa fa-exclamation fa-fw"></i></div>
	<h1 class="nd-alert-title">Warning</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button warning expanded">확인</a></div>
</div>

<div class="nd-alert nd-alert-error nd-alert-block m-b-1">
	<div class="nd-alert-icon"><i class="fa fa-exclamation fa-fw"></i></div>
	<h1 class="nd-alert-title">Error</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button alert expanded">확인</a></div>
</div>

<div class="nd-alert nd-alert-cancel nd-alert-block m-b-1">
	<div class="nd-alert-icon"><i class="fa fa-times fa-fw"></i></div>
	<h1 class="nd-alert-title">Cancel</h1>
	<p class="nd-alert-sumary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button nd-pink expanded">확인</a></div>
</div>

Infomation

You can close me too, and I close using a Motion UI animation.

코드보기

Message

Warning!!

You can close me too, and I close using a Motion UI animation.

Warning!!

You can close me too, and I close using a Motion UI animation.

Warning!!

You can close me too, and I close using a Motion UI animation.

Warning!!

You can close me too, and I close using a Motion UI animation.

Warning!!

You can close me too, and I close using a Motion UI animation.

Warning!!

You can close me too, and I close using a Motion UI animation.

코드보기

<div class="nd-msg nd-msg-primary" data-closable>
	<div class="message">
		<button type="button" class="float-right close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

<div class="nd-msg nd-msg-primary nd-msg-icon nd-msg-dismissible" data-closable>
	<div class="icon"><i class="fa fa-bell-o" aria-hidden="true"></i></div>
	<div class="message">
		<button type="button" class="close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

<div class="nd-msg nd-msg-primary nd-msg-icon nd-msg-border-color nd-msg-dismissible" data-closable>
	<div class="icon"><i class="fa fa-bell-o" aria-hidden="true"></i></div>
	<div class="message">
		<button type="button" class="close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

<div class="nd-msg nd-msg-success nd-msg-icon nd-msg-border-color nd-msg-dismissible" data-closable>
	<div class="icon"><i class="fa fa-bell-o" aria-hidden="true"></i></div>
	<div class="message">
		<button type="button" class="close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

<div class="nd-msg nd-msg-info nd-msg-icon nd-msg-border-color nd-msg-dismissible" data-closable>
	<div class="icon"><i class="fa fa-bell-o" aria-hidden="true"></i></div>
	<div class="message">
		<button type="button" class="close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

<div class="nd-msg nd-msg-warning nd-msg-icon nd-msg-border-color nd-msg-dismissible" data-closable>
	<div class="icon"><i class="fa fa-bell-o" aria-hidden="true"></i></div>
	<div class="message">
		<button type="button" class="close" data-close><span aria-hidden="true" class="s7-close"></span></button>
		<strong>Warning!!</strong><p>You can close me too, and I close using a Motion UI animation.</p>
	</div>
</div>

Callout

기본

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

코드보기

<div class="callout" data-closable>
  <p>You can so totally close this!</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
	<span aria-hidden="true">×</span>
  </button>
</div>

<div class="primary callout" data-closable>
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
	<span aria-hidden="true">×</span>
  </button>
</div>

<div class="success callout" data-closable>
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
	<span aria-hidden="true">×</span>
  </button>
</div>

<div class="warning callout" data-closable>
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
	<span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert callout" data-closable>
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
	<span aria-hidden="true">×</span>
  </button>
</div>

크기

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

코드보기

모달(Reveal)

기본

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

코드보기

커스텀

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

코드보기