Layouts

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>

Message

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.

확인

Infomation

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

<div class="nd-alert nd-alert-block infomation">
	<div class="icon"><i class="icon-info-o"></i></div>
	<div class="titles">Infomation</div>
	<p class="summary">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-block success">
	<div class="icon"><i class="icon-check-circle-o"></i></div>
	<div class="titles">Success</div>
	<p class="summary">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-block warning">
	<div class="icon"><i class="icon-warning"></i></div>
	<div class="titles">Warning</div>
	<p class="summary">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-block error">
	<div class="icon"><i class="icon-error-o"></i></div>
	<div class="titles">Error</div>
	<p class="summary">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-block cancel">
	<div class="icon"><i class="icon-close-circle-o"></i></div>
	<div class="titles">Cancel</div>
	<p class="summary">You can close me too, and I close using a Motion UI animation.</p>
	<div><a href="#link" class="button nd-gray expanded">확인</a></div>
</div>

<button class="button expanded large" data-open="exampleModal1">알림창확인</button>
<div class="nd-alert-wrap" id="exampleModal1" data-reveal>
    <div class="nd-alert-overlay"></div>
    <div class="nd-alert nd-alert-block infomation">
        <div class="icon"><i class="icon-info-o"></i></div>
        <h1 class="titles">Infomation</h1>
        <p class="summary">You can close me too, and I close using a Motion UI animation.</p>
        <button type="button" class="button expanded" data-close>확인</button>
    </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 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="success 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="warning 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="alert 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>

모달(Reveal)

Awesome. I Have It.

Your couch. It is mine.

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