<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="social-acc">
<div class="fb">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Login with Facebook</span></a>
</div>
</div>
</div>
<div class="gp mt10">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Login with Google</span></a>
</div>
</div>
</div>
</div>
<div data-type="komfo-acc" class="mt25">
<label class="text-center">Don't want to use your social media account?</label>
<div class="button-wrap mt5">
<div class="main">
<a class="button"><span>Create Komfo account</span></a>
</div>
</div>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="create-account" method="POST" action="">
<div class="textfield disabled">
<div class="textfield-area">
<input class="textfield-input" type="text" value="nikiforova@gmail.com" disabled="disabled" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="If you want to change this email, ask your Komfo admin to invite you again."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Create password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Use at least 8 characters."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Repeat password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Repeat the password to confirm."></svg>
</div>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Create account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Login with social media account.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="create-account" method="POST" action="">
<div class="textfield disabled">
<div class="textfield-area">
<input class="textfield-input" type="text" value="nikiforova@gmail.com" disabled="disabled" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="If you want to change this email, ask your Komfo admin to invite you again."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Create password" value="********" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Use at least 8 characters."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Repeat password" value="********" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Repeat the password to confirm."></svg>
</div>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<div class="button">
<div class="loader loader-color-white loader-size-small">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
<div class="mt5">
<a class="link">Login with social media account.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="create-account" method="POST" action="">
<div class="msg msg-type-error mb10">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Hmm, it seems like this email is already used in Komfo.</p>
</div>
</div>
<div class="textfield error disabled">
<div class="textfield-area">
<input class="textfield-input" type="text" value="nikiforova@gmail.com" disabled="disabled" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="If you want to change this email, ask your Komfo admin to invite you again."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Create password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Use at least 8 characters."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Repeat password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Repeat the password to confirm."></svg>
</div>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Create account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Login with social media account.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="forgotten-password" method="POST" action="">
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button js_kf_send_fp_mail"><span>Send email</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Go back to login page.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="forgotten-password" method="POST" action="">
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Email" value="nikiforova@gmail.com" />
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<div class="button">
<div class="loader loader-color-white loader-size-small">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
<div class="mt5">
<a class="link">Go back to login page.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="forgotten-password" method="POST" action="">
<div class="msg msg-type-success mb10">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>New password request was sent to your email. Check your inbox.</p>
</div>
</div>
<div class="mt5">
<a class="link">Go back to login page.</a>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="change-password" method="POST" action="">
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Create password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Use at least 8 characters."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Repeat password" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Repeat the password to confirm."></svg>
</div>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Save password</span></a>
</div>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="change-password" method="POST" action="">
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Create password" value="********" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Use at least 8 characters."></svg>
</div>
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Repeat password" value="********" />
<div class="textfield-addon">
<svg type="misc-questionmark" title="Repeat the password to confirm."></svg>
</div>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<div class="button">
<div class="loader loader-color-white loader-size-small">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="change-password" method="POST" action="">
<div class="msg msg-type-success mb10">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Your password was changed successfully.</p>
</div>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<form data-type="change-password" method="POST" action="">
<div class="msg msg-type-error mb10">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>This link has expired.</p>
</div>
</div>
</form>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div data-type="social-acc">
<div class="fb">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Login with Facebook</span></a>
</div>
</div>
</div>
<div class="gp mt10">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Login with Google</span></a>
</div>
</div>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div data-type="social-acc">
<div class="fb logged">
<div class="button-wrap">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Facebook account</a></label>
</div>
<div class="gp mt10">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Login with Google</span></a>
</div>
</div>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div data-type="social-acc">
<div class="fb">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Login with Facebook</span></a>
</div>
</div>
</div>
<div class="gp logged mt10">
<div class="button-wrap">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Google account</a></label>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div data-type="social-acc">
<div class="fb logged">
<div class="button-wrap">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Facebook account</a></label>
</div>
<div class="gp logged mt10">
<div class="button-wrap">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Google account</a></label>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div class="msg msg-type-warning mb20">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>It seems that your Komfo Platform account has expired. Please, contact our sales representative.</p>
</div>
</div>
<div data-type="social-acc">
<div class="fb logged">
<div class="button-wrap disabled">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Facebook account</a></label>
</div>
<div class="gp logged mt10">
<div class="button-wrap disabled">
<div class="sub">
<img src="http://graph.facebook.com/1014561109/picture?return_ssl_resources=0" alt="Martin Metodiev" class="avatar" width="50" height="50">
</div>
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Log as Martin Metodiev</span></a>
</div>
</div>
<label class="mt5"><a class="link">Use another Google account</a></label>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap disabled mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div data-type="social-acc">
<div class="fb">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-facebook"></svg> Login with Facebook</span></a>
</div>
</div>
</div>
<div class="gp mt10">
<div class="button-wrap">
<div class="main">
<a class="button"><span><svg type="gl-18-google"></svg> Login with Google</span></a>
</div>
</div>
</div>
</div>
<form data-type="komfo-acc" method="POST" action="">
<label class="text-center mv10">or</label>
<div class="msg msg-type-error mb10">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Hmm, it seems like this email is not registered in Komfo.</p>
</div>
</div>
<div class="textfield error">
<div class="textfield-area">
<input class="textfield-input" type="email" placeholder="Email" value="nikiforova@gmail.com" />
</div>
</div>
<div class="textfield mt10">
<div class="textfield-area">
<input class="textfield-input" type="password" placeholder="Password" value="********" />
</div>
</div>
<div class="g-recaptcha mt10" data-sitekey="6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N">
<div>
<div style="width: 304px; height: 78px;">
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Ld6Dh4TAAAAACS64LMncCY3qZAyMjkYOKKN3R4N&co=aHR0cDovL2xvY2FsLmtvbWZvLmNvbTozNjMy&hl=bg&v=r20160502112552&size=normal&cb=yul4d09q8d9h" title="приспособление recaptcha" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0; resize: none; display: none; "></textarea>
</div>
</div>
<div class="button-wrap mt10">
<div class="main">
<a class="button"><span>Login with Komfo account</span></a>
</div>
</div>
<div class="mt5">
<a class="link">Forgot your password?</a>
</div>
</form>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<dialog data-module="authentication-box">
<div class="content">
<span data-img="komfo-logo"><i></i></span>
<div data-type="login-form">
<div class="logging loader">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
<label class="text-center mt25">Not Komfo user? <a class="link">Learn more about Komfo</a>.</label>
</div>
</div>
</dialog>
<div class="table">
<div class="table-basic" data-role="channels">
<div class="thead">
<div class="tr">
<div class="th">Channels</div>
<div class="th">Clients</div>
<div class="th">Users <svg type="misc-questionmark" title="This should be an info text."></svg></div>
<div class="th">Folders</div>
<div class="th">Status</div>
<div class="th text-right">Actions</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p class="text-overflow">Komfo SoMe English</p>
<p class="text-overflow">Komfo SoMe</p>
</div>
<div class="td text-center">
<p class="text-overflow">12</p>
<p class="text-overflow">0</p>
</div>
<div class="td text-center">
<p class="text-overflow">12</p>
<p class="text-overflow">3</p>
</div>
<div class="td text-center">
<svg type="misc-exclamation-mark"></svg>
</div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-reload"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta"><i class="social"><svg type="social-12-tw"></svg></i> Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p class="text-overflow">Komfo International</p>
</div>
<div class="td text-center">
<p class="text-overflow">100</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta"><i class="social"><svg type="social-12-li"></svg></i> LinkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p class="text-overflow">Komfo International</p>
</div>
<div class="td text-center">
<p class="text-overflow">78</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p class="text-overflow">Komfo SoMe English</p>
<p class="text-overflow">Komfo SoMe</p>
<p class="text-overflow">Komfo International</p>
</div>
<div class="td text-center">
<p class="text-overflow">22</p>
<p class="text-overflow">0</p>
<p class="text-overflow">15</p>
</div>
<div class="td text-center">
<p class="text-overflow">2</p>
<p class="text-overflow">12</p>
<p class="text-overflow">5</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google Plus</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p class="text-overflow">Komfo International</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="flex-jc-flex-end">
<div class="pagination">
<div class="pagination-dialog">
<p>channels <span class="count">6,520 – 6,570</span> of <span class="total">6,578</span></p>
<div class="btn-group controllers">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-caretl"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-caretr"></svg></a>
</div>
</div>
</div>
</footer>
</div>
Kalinka Nikiforova, Marta Droneva
12 Content Creators
2 Moderators
16 Insight Analysts
12
<div class="table">
<div class="table-basic" data-role="channels">
<div class="thead">
<div class="tr">
<div class="th">Channels</div>
<div class="th">Likely admins <svg type="misc-questionmark" title="This should be an info text."></svg></div>
<div class="th">Users <svg type="misc-questionmark" title="This should be an info text."></svg></div>
<div class="th">Folders</div>
<div class="th">Status</div>
<div class="th text-right">Actions</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Kalinka Nikiforova, Marta Droneva</p>
</div>
<div class="td">
<p class="text-overflow">12 Content Creators</p>
<p class="text-overflow">2 Moderators</p>
<p class="text-overflow">16 Insight Analysts</p>
</div>
<div class="td text-center">
<p class="text-overflow">12</p>
</div>
<div class="td text-center">
<svg type="misc-exclamation-mark"></svg>
</div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-reload"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta"><i class="social"><svg type="social-12-tw"></svg></i> Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Tsvetan Rangelov</p>
</div>
<div class="td">
<p class="text-overflow">No users</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta"><i class="social"><svg type="social-12-li"></svg></i> LinkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Unknown</p>
</div>
<div class="td">
<p class="text-overflow">No users</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Unknown</p>
</div>
<div class="td">
<p class="text-overflow">2 Content Creators</p>
<p class="text-overflow">1 Moderator</p>
</div>
<div class="td text-center">
<p class="text-overflow">2</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google Plus</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Martin Metodiev, Ves Velichkov</p>
</div>
<div class="td">
<p class="text-overflow">No users</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center">
<svg type="misc-exclamation-mark"></svg>
</div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-reload"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Martin Metodiev</p>
</div>
<div class="td">
<p class="text-overflow">2 Content Creators</p>
<p class="text-overflow">1 Moderator</p>
</div>
<div class="td text-center">
<p class="text-overflow">3</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-dots"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">View in Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-duplicate"></svg>
</span>
<span class="text">Move to client</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete channel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="flex-jc-flex-end">
<div class="pagination">
<div class="pagination-dialog">
<p>channels <span class="count">1 – 50</span> of <span class="total">6,578</span></p>
<div class="btn-group controllers">
<a class="btn btn-sm btn-transparent disabled"><svg type="gl-18-caretl"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-caretr"></svg></a>
</div>
</div>
</div>
</footer>
</div>
Kalinka Nikiforova, Marta Droneva
Content Creators
12
<div class="table">
<div class="table-basic" data-role="channels">
<div class="thead">
<div class="tr">
<div class="th">Channels</div>
<div class="th">Likely admins <svg type="misc-questionmark" title="This should be an info text."></svg></div>
<div class="th">My roles</div>
<div class="th">Folders</div>
<div class="th">Status</div>
<div class="th text-right">Actions</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Kalinka Nikiforova, Marta Droneva</p>
</div>
<div class="td">
<p>Content Creators</p>
<p class="meta">Publish, advertise, moderate and measure</p>
</div>
<div class="td text-center">
<p class="text-overflow">12</p>
</div>
<div class="td text-center">
<svg type="misc-exclamation-mark"></svg>
</div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-reload"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta"><i class="social"><svg type="social-12-tw"></svg></i> Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Tsvetan Rangelov</p>
</div>
<div class="td">
<p>Content Creators</p>
<p class="meta">Publish, advertise, moderate and measure</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta"><i class="social"><svg type="social-12-li"></svg></i> LinkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Unknown</p>
</div>
<div class="td">
<p>Insight Analyst</p>
<p class="meta">Measure</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Unknown</p>
</div>
<div class="td">
<p>Moderator</p>
<p class="meta">Moderate</p>
</div>
<div class="td text-center">
<p class="text-overflow">2</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google Plus</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Martin Metodiev, Ves Velichkov</p>
</div>
<div class="td">
<p>Insight Analyst</p>
<p class="meta">Measure</p>
</div>
<div class="td text-center">
<p class="text-overflow">1</p>
</div>
<div class="td text-center">
<svg type="misc-exclamation-mark"></svg>
</div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-reload"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td">
<p>Martin Metodiev</p>
</div>
<div class="td">
<p>Content Creators</p>
<p class="meta">Publish, advertise, moderate and measure</p>
</div>
<div class="td text-center">
<p class="text-overflow">3</p>
</div>
<div class="td text-center"></div>
<div class="td text-right pt5">
<div class="btn-group">
<a class="btn btn-sm btn-transparent"><svg type="gl-18-people"></svg></a>
<div class="dropdown">
<a class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown"><svg type="gl-18-gear"></svg></a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-clock"></svg>
</span>
<span class="text">Opening hours</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-bell"></svg>
</span>
<span class="text">Storm alert</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="flex-jc-flex-end">
<div class="pagination">
<div class="pagination-dialog">
<p>channels <span class="count">1 – 6</span> of <span class="total">6</span></p>
</div>
</div>
</footer>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-filters">
Open modal
</button>
<div class="modal fade" id="modal-filters" role="dialog" data-module="filters-selector">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Filter by</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
<div class="col-categories">
<ul class="list-categories">
<li class="list-item active">
<a class="main link icon-link">
Type <b class="badge"><span>2</span></b> <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Notes <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Zendesk <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Sentiments <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Labels <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Timespan <svg type="gl-18-caretr"></svg>
</a>
</li>
</ul>
</div>
<div class="col-content">
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-1">All labels</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-1" type="checkbox">
<label for="sheetrow-list-checkbox-right-1"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-2">Branding DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-2" type="checkbox">
<label for="sheetrow-list-checkbox-right-2"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-3">Engagement DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-3" type="checkbox">
<label for="sheetrow-list-checkbox-right-3"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-4">Website DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-4" type="checkbox">
<label for="sheetrow-list-checkbox-right-4"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-5">Website BG</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-5" type="checkbox">
<label for="sheetrow-list-checkbox-right-5"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-b1">All labels</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-b1" type="checkbox">
<label for="sheetrow-list-checkbox-right-b1"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-b2">Branding DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-b2" type="checkbox">
<label for="sheetrow-list-checkbox-right-b2"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-b3">Engagement DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-b3" type="checkbox">
<label for="sheetrow-list-checkbox-right-b3"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-b4">Website DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-b4" type="checkbox">
<label for="sheetrow-list-checkbox-right-b4"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-b5">Website BG</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-b5" type="checkbox">
<label for="sheetrow-list-checkbox-right-b5"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-c1">All labels</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-c1" type="checkbox">
<label for="sheetrow-list-checkbox-right-c1"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-c2">Branding DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-c2" type="checkbox">
<label for="sheetrow-list-checkbox-right-c2"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-c3">Engagement DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-c3" type="checkbox">
<label for="sheetrow-list-checkbox-right-c3"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-c4">Website DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-c4" type="checkbox">
<label for="sheetrow-list-checkbox-right-c4"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-c5">Website BG</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-c5" type="checkbox">
<label for="sheetrow-list-checkbox-right-c5"></label>
</div>
</div>
</li>
</ul>
</div>
<div class="col-results">
<div class="empty">
<span>Nothing selected</span>
</div>
<div class="group">
<span class="meta">Type</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">posts</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">tweets</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">comments</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Content</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">photo</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">video</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Labels</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">Social Media</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Social Media at scale</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Social Campaign as bussibess mode and blah blah</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Sentiments</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">positive</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Performance</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">most commented</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Fans</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">engaged</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">influential</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Timespan</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">12 Sep 2016 — 12 Oct 2016</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Type</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">posts</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">tweets</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">comments</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Content</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">photo</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">video</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Labels</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">Social Media</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Social Media at scale</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Social Campaign as bussibess mode and blah blah</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Sentiments</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">positive</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Performance</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">most commented</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Fans</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">engaged</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">influential</span>
</span>
</div>
</div>
<div class="group">
<span class="meta">Timespan</span>
<div class="tags">
<span class="tag">
<span class="close"></span>
<span class="main">12 Sep 2016 — 12 Oct 2016</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer cf">
<div class="pull-left">
<div class="counter">
<b class="badge"><span>0</span></b> <label>filters selected</label>
</div>
</div>
<div class="pull-right">
<div class="info">
<svg type="misc-questionmark" ></svg>
<label>Filters will be applied for the last 30 days, unless you select another timespan</label>
</div>
<a class="btn btn-default" data-dismiss="modal">Clear all filters</a>
<a class="btn btn-primary" data-dismiss="modal">Filter</a>
</div>
</div>
</div>
</div>
</div>
Profile
Welcome to Komfo! We took this information from your Facbook account. You can chnange it now or any time later from your profile menu.
We respect your privacy and will never reveal your information to any third party.
<!-- NOTE:
`data-module="onboarding"` should be applied to the parent element ( <div class="theme-bgr p20"> )
when used in the platform because of it's specific styles -->
<div class="theme-bgr p20">
<div class="content-wrapper">
<div class="panel">
<div class="panel-body pt25 ph80 h535">
<p class="ttl-setup mb0">Profile</p>
<p>Welcome to Komfo! We took this information from your Facbook account. You can chnange it now or any time later from your profile menu.</p>
<p class="text-size-13 text-col-system">We respect your privacy and will never reveal your information to any third party.</p>
<form class="form form-ll form-ll-pr-2575 mt15 center-block w450">
<div class="line">
<div class="name"></div>
<div class="elem">
<div class="thumb thumb-ft-circle thumb-ft-avatar thumb-size-158">
<div class="holder">
<img src="{{$ctrl.image.thumbnail}}"/>
</div>
<div class="addon-br">
<label for="input-file-album"
class="btn btn-transparent" role="button"
title="Use photos less than 16MB">
<svg type="gl-18-camera"></svg>
</label>
<input type="file" accept="png" nv-file-select
uploader="$ctrl.angularFileUploader"
id="input-file-album">
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-create-profile-fn">First name <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-create-profile-fn" class="textfield-input" type="text" placeholder="First name">
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-create-profile-ln">Last name <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-create-profile-ln" class="textfield-input" type="text" placeholder="Last name">
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-create-profile-title">Job Title <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-create-profile-title" class="textfield-input" type="text" placeholder="Job Title">
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-create-profile-phone">Mobile Phone <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1">
<span>Country code</span> <svg type="gl-18-caretb"></svg>
</button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">+1</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">+2</span>
</a>
</li>
</ul>
</div>
</div>
<div class="textfield-area">
<input id="form-create-profile-phone" class="textfield-input" placeholder="e. g. 71999100">
</div>
</div>
</div>
</div>
</form>
</div>
<footer class="flex flex-ai-center mt10 mb15">
<p class="text-col-system flex-g-1 pl80"></p>
<a class="btn btn-secondary mh20">Next</a>
</footer>
</div>
<div class="pagination-bullets center-block mt30">
<span class="bullet active"></span>
<span class="bullet"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div>
</div>
</div>
Social media channels
You are invited, as admin, to manage the Komfo environment for ECCO International. 200 social media channels were already added. Add more now or any time later.
<!-- NOTE:
`data-module="onboarding"` should be applied to the parent element ( <div class="theme-bgr p20"> )
when used in the platform because of it's specific styles -->
<div class="theme-bgr p20">
<div class="content-wrapper">
<div class="panel">
<div class="panel-body pt25 ph80 h535">
<p class="ttl-setup mb0">Social media channels</p>
<div class="card mt10">
<picture class="avatar avatar-feature-circle">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name text-size-19 text-weight-bold">Hello, Angelina Jolie</span>
</span>
</span>
</span>
</div>
<p class="mt10">You are invited, as admin, to manage the Komfo environment for ECCO International. 200 social media channels were already added. Add more now or any time later.</p>
<div class="social-boxes-group mt20">
<div class="social-box" data-network="fb">
<div class="dialog">
<div class="main">
<svg type="gl-18-facebook"></svg>
<span class="counter">158</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="tw">
<div class="dialog">
<div class="main">
<svg type="gl-18-twitter"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="li">
<div class="dialog">
<div class="main">
<svg type="gl-18-linkedin"></svg>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="ig">
<div class="dialog">
<div class="main">
<svg type="gl-18-instagram"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="gp">
<div class="dialog">
<div class="main">
<svg type="gl-18-google"></svg>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="yt">
<div class="dialog">
<div class="main">
<svg type="gl-18-youtube"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
</div>
</div>
<footer class="flex flex-ai-center mt10 mb15">
<p class="text-col-system flex-g-1 pl80"><b class="badge"><span>161</span></b> social media channels added</p>
<a class="btn btn-secondary mh20">Next</a>
</footer>
</div>
<div class="pagination-bullets center-block mt30">
<span class="bullet"></span>
<span class="bullet active"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div>
</div>
</div>
Social media channels
You are invited to work with the following social media channels of ECCO International.
No channels yet
Ask a Komfo admin to give you permissions to work with certain channels or you can add the social media channels that you manage.
<!-- NOTE:
`data-module="onboarding"` should be applied to the parent element ( <div class="theme-bgr p20"> )
when used in the platform because of it's specific styles -->
<div class="theme-bgr p20">
<div class="content-wrapper">
<div class="panel">
<div class="panel-body pt25 ph80 h535">
<p class="ttl-setup mb0">Social media channels</p>
<div class="card mt10">
<picture class="avatar avatar-feature-circle">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name text-size-19 text-weight-bold">Hello, Angelina Jolie</span>
</span>
</span>
</span>
</div>
<p class="mt10">You are invited to work with the following social media channels of ECCO International.</p>
<div class="panel mt10">
<div class="panel-body p0 overflow h275 translate3d">
<div class="flex flex-d-column flex-jc-center h275 p40">
<div class="sys-block">
<p class="ttl">No channels yet</p>
<div class="text">
<p>Ask a Komfo admin to give you permissions to work with certain channels or you can add the social media channels that you manage.</p>
</div>
</div>
</div>
</div>
<div class="panel-footer bgr-silver flex flex-jc-center">
<div class="dropdown db">
<button class="btn btn-default" data-toggle="dropdown"><span>Add channels</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu dropdown-menu-top">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-twitter"></svg>
</span>
<span class="text">Twitter</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-linkedin"></svg>
</span>
<span class="text">LinkedIn</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-instagram"></svg>
</span>
<span class="text">Instagram</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-google"></svg>
</span>
<span class="text">Google+</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-youtube"></svg>
</span>
<span class="text">YouTube</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="flex flex-ai-center mt10 mb15">
<p class="text-col-system flex-g-1 pl80"><b class="badge"><span>161</span></b> social media channels added</p>
<a class="btn btn-secondary mh20">Next</a>
</footer>
</div>
<div class="pagination-bullets center-block mt30">
<span class="bullet"></span>
<span class="bullet active"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div>
</div>
</div>
Social media channels
You are invited to work with the following social media channels of ECCO International.
Content Creator
Moderator
Insight Analyst
Content Creator
Content Creator
Moderator
Insight Analyst
Content Creator
<!-- NOTE:
`data-module="onboarding"` should be applied to the parent element ( <div class="theme-bgr p20"> )
when used in the platform because of it's specific styles -->
<div class="theme-bgr p20">
<div class="content-wrapper">
<div class="panel">
<div class="panel-body pt25 ph80 h535">
<p class="ttl-setup mb0">Social media channels</p>
<div class="card mt10">
<picture class="avatar avatar-feature-circle">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name text-size-19 text-weight-bold">Hello, Angelina Jolie</span>
</span>
</span>
</span>
</div>
<p class="mt10">You are invited to work with the following social media channels of ECCO International.</p>
<div class="panel mt10">
<div class="panel-body p0 overflow h275 translate3d">
<div class="table-basic bdr-w-0">
<div class="thead">
<div class="tr">
<div class="th">New channels</div>
<div class="th">Your role</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Content Creator</p>
<p class="meta">Publish and advertise content</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta">Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Moderator</p>
<p class="meta">Respond to social community</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta">linkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Insight Analyst</p>
<p class="meta">Analyse social data</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Content Creator</p>
<p class="meta">Publish and advertise content</p>
</div>
</div>
</div>
</div>
<div class="table-basic bdr-w-0 mt20">
<div class="thead">
<div class="tr">
<div class="th">Channels</div>
<div class="th"></div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Content Creator</p>
<p class="meta">Publish and advertise content</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta">Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Moderator</p>
<p class="meta">Respond to social community</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta">linkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Insight Analyst</p>
<p class="meta">Analyse social data</p>
</div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td w200">
<p class="text-weight-bold">Content Creator</p>
<p class="meta">Publish and advertise content</p>
</div>
</div>
</div>
</div>
<div class="bdr-top-w-1 bdr-col-pale text-center pv10 mb10">
<a class="link link-gray text-size-13">30 more</a>
</div>
</div>
<div class="panel-footer bgr-silver flex flex-jc-center">
<div class="dropdown db">
<button class="btn btn-default" data-toggle="dropdown"><span>Add channels</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu dropdown-menu-top">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-facebook"></svg>
</span>
<span class="text">Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-twitter"></svg>
</span>
<span class="text">Twitter</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-linkedin"></svg>
</span>
<span class="text">LinkedIn</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-instagram"></svg>
</span>
<span class="text">Instagram</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-google"></svg>
</span>
<span class="text">Google+</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-youtube"></svg>
</span>
<span class="text">YouTube</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="flex flex-ai-center mt10 mb15">
<p class="text-col-system flex-g-1 pl80"><b class="badge"><span>161</span></b> social media channels added</p>
<a class="btn btn-secondary mh20">Next</a>
</footer>
</div>
<div class="pagination-bullets center-block mt30">
<span class="bullet"></span>
<span class="bullet active"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<!-- Structure for active tab goes here -->
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="target-selector">
<select class="select2-multiple-dropdown" multiple="multiple"></select>
</div>
</div>
</div>
$.ajax({
type: 'GET',
dataType: 'json',
url: '../assets/js/select2-example-data.json'
}).done(function(response) {
$('[data-role="target-selector"] select').select2({
placeholder: 'Select Facebook Pages',
data: response.data,
dropdownCssClass: 'multiple-dropdown',
templateResult: function(item) {
if(item.itemType === 'folder') {
return $(
'<div class="card">' +
'<picture class="avatar">' +
item.images.reduce(function (carry, url) {
return carry + '<img src="' + url + '" ' +
'width="32" height="32" alt="' + item.text + '" />';
}, '') +
'</picture>' +
'<div class="data">' +
'<div class="cell">' +
'<div class="holder">' +
'<span class="name">' + item.text + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
} else if(item.itemType === 'channel') {
return $(
'<div class="card">' +
'<picture class="avatar">' +
item.images.reduce(function (carry, url) {
return carry + '<img src="' + url + '" ' +
'width="32" height="32" alt="' + item.text + '" />';
}, '') +
'</picture>' +
'<div class="data">' +
'<div class="cell">' +
'<div class="holder">' +
'<span class="name">' + item.text + '</span>' +
'<span class="meta">Meta details</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
}
},
matcher: function (params, data) {
// Always return the object if there is nothing to compare
if ($.trim(params.term) === '') {
return data;
}
// Do a recursive check for options with children
if (data.children && data.children.length > 0) {
// Clone the data object if there are children
// This is required as we modify the object to remove any non-matches
var match = $.extend(true, {}, data);
// Check each child of the option
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = matcher(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
// If any children matched, return the new object
if (match.children.length > 0) {
return match;
}
// If there were no matching children, check just the plain object
return matcher(params, match);
}
var original = data.text.toUpperCase();
var term = params.term.toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}
// If it doesn't contain the term, don't return anything
return null;
},
sorter: function(data) {
return data.sort(function(a,b) {
if (a.text < b.text) { return -1; }
if (a.text > b.text) { return 1; }
return 0;
});
}
}).on('select2:selecting', function(e) {
var element = e.params.args.data.element,
$element = $(element),
$parent = $element.parent();
if ($parent.find(':selected').length > 0) {
var $second = $parent.find(':selected').eq(-1);
$element.detach();
$second.after($element);
} else {
$element.detach();
$parent.prepend($element);
}
});
});
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="placeholder">
<label for="input-file-media-1" class="btn btn-secondary" role="button">
<svg type="gl-18-camera"></svg>
<span>Upload photo or video</span>
</label>
<input type="file" id="input-file-media-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-1">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-1">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr" title="Click to edit">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="add">
<label class="link link-dark" for="add-photos-input-1">+ Add Photos</label> <span class="remaining">4</span>
<input type="file" id="add-photos-input-1">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder"></div>
<div class="addon-br">
<label for="input-file-without-image" class="btn btn-default btn-sm" title="Upload photo">
<svg type="gl-16-camera"></svg>
</label>
<input type="file" id="input-file-without-image">
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr" title="Click to edit">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="add">
<label class="link link-dark" for="add-photos-input-2">+ Add Photos</label> <span class="remaining">4</span>
<input type="file" id="add-photos-input-2">
</span>
</div>
</div>
</div>
</div>
</div>
When enter in edit mode an edit class will be added to the item container and that will show the editor block, like so:
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item edit">
<div class="editor">
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input">Sign up for ECCO’s Market newsletter today</textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-2">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-2">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="add">
<label class="link link-dark" for="add-photos-input-3">+ Add Photos</label> <span class="remaining">4</span>
<input type="file" id="add-photos-input-3">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-3">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-3">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<div class="loader loader-mode-stretched loader-size-small loader-color-white">
<span><i></i><i></i><i></i></span>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="add">
<label class="link link-dark" for="add-photos-input-4">+ Add Photos</label> <span class="remaining">2</span>
<input type="file" id="add-photos-input-4">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-4">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-4">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-p.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-5">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-5">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-square.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-6">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-6">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-7">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-7">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-p.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-8">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-8">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." />www.eccos-market.com</textarea>
</div>
</div>
<div data-role="link-attachments">
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm" title="Change photo">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-dropdown-9">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Upload photo</span>
</label>
<input type="file" id="input-file-dropdown-9">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete photo</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="thumb thumb-size-120">
<div class="holder">
<div class="error" title="Use only (jpg, gif, png) files. Use photos less than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<label for="input-file-failed-image" class="btn btn-default btn-sm" title="Upload photo">
<svg type="gl-16-camera"></svg>
</label>
<input type="file" id="input-file-failed-image">
</div>
</div>
<div class="content">
<a class="btn btn-default btn-sm" title="Delete link attachment">
<svg type="gl-16-trash"></svg>
</a>
<p class="ttl" title="Click to edit">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url" title="Click to edit">www.eccos-market.com</p>
<div class="cta dropbox">
<a data-toggle="dropdown" class="link icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-12-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="add">
<label class="link link-dark" for="add-photos-input-5">+ Add Photos</label> <span class="remaining">3</span>
<input type="file" id="add-photos-input-5">
</span>
</div>
</div>
</div>
</div>
</div>
Drag a file over the screen and the over the drop zone.
Drop file here
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="placeholder">
<label for="input-file-media-interactive" class="btn btn-secondary" role="button">
<svg type="gl-18-camera"></svg>
<span>Upload photo or video</span>
</label>
<input type="file" id="input-file-media-interactive">
</div>
</div>
</div>
</div>
</div>
</div>
Uploading:
Drop file here
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-photo">
<div class="thumb">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Waiting for a server respond:
Drop file here
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-photo">
<div class="thumb">
<div class="holder">
<div class="loader loader-mode-stretched loader-size-small loader-color-white">
<span><i></i><i></i><i></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Successfully loaded:
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-photo">
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-br">
<a class="btn btn-default btn-sm" title="Delete photo">
<svg type="gl-16-trash"></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Uploading failed:
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-photo">
<div class="thumb">
<div class="holder">
<div class="error" title="Use only JPG, GIF, PNG files, smaller than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<a class="btn btn-default btn-sm" title="Delete photo">
<svg type="gl-16-trash"></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Without thumbnail
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="media-field" class="textfield">
<div class="textfield-area">
<input type="text" class="textfield-input" placeholder="Name this video..." />
</div>
</div>
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-video">
<div class="thumb">
<div class="holder">
<svg type="misc-videotape"></svg>
</div>
<div class="addon-br">
<div class="btn-group">
<label for="input-file-video-thumb1" class="btn btn-default btn-sm" title="Add thumbnail">
<svg type="gl-16-camera"></svg>
</label>
<a class="btn btn-default btn-sm" title="Delete video">
<svg type="gl-16-trash"></svg>
</a>
</div>
<input type="file" id="input-file-video-thumb1">
</div>
</div>
</div>
<div class="addon">
<span class="name">video-name.mov</span>
</div>
</div>
</div>
<div class="panel-footer">
<div class="subtitles flex flex-ai-center">
<a class="flex-g-1 link link-dark">Add subtitles</a>
<span class="meta">None</span>
</div>
<div class="cta">
<div class="dropdown">
<a data-toggle="dropdown" class="link link-dark icon-link" title="Put a button to your post to make people click.">
Add call to action <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
With thumbnail
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span>
Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="media-field" class="textfield">
<div class="textfield-area">
<input type="text" class="textfield-input" placeholder="Name this video..."/>
</div>
</div>
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write your post..."/></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-single-video">
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-p.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-default btn-sm"
title="Change thumbnail">
<svg type="gl-16-camera"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item action">
<label class="link" for="input-file-video-thumb2">
<span class="prefix">
<svg class="icon" type="gl-18-camera"></svg>
</span>
<span class="text">Change thumbnail</span>
</label>
<input type="file" id="input-file-video-thumb2">
</li>
<li class="dropdown-item action">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete thumbnail</span>
</a>
</li>
</ul>
</div>
<a class="btn btn-default btn-sm" title="Delete video">
<svg type="gl-16-trash"></svg>
</a>
</div>
</div>
</div>
</div>
<div class="addon">
<span class="name">Very-looooong-named-video-with-numbers-01234567890123456789-0123456789.mov</span>
</div>
</div>
</div>
<div class="panel-footer">
<div class="subtitles flex flex-ai-center">
<a class="flex-g-1 link link-dark">Add subtitles</a>
<span class="meta">Filename.en_US.srt</span>
</div>
<div class="cta">
<div class="dropdown">
<a data-toggle="dropdown" class="link link-dark icon-link"
title="Put a button to your post to make people click.">
Watch More
<svg type="gl-16-caretb">
</svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">No button</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Shop Now</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Book Travel</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Learn More</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Sign Up</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">Download</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">Watch More</span>
</a>
</li>
</ul>
</div>
<div class="textfield">
<div class="group">
<div class="textfield-area">
<input class="textfield-input" type="text"
placeholder="URL that you want people to visit">
</div>
<div class="textfield-area">
<input class="textfield-input" type="text"
placeholder="Name the link or leave empty to display the URL">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Drop file here
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li>
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="media-field" class="textfield">
<div class="textfield-area">
<input type="text" class="textfield-input" placeholder="Name this album..." />
</div>
</div>
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write album description..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="placeholder">
<label for="input-file-album" class="btn btn-secondary" role="button">
<svg type="gl-18-camera"></svg>
<span>Upload photos</span>
</label>
<input type="file" id="input-file-album" multiple>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li>
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="compose-box" class="panel">
<div class="panel-body">
<div data-role="media-field" class="textfield">
<div class="textfield-area">
<input type="text" class="textfield-input" placeholder="Name this album..." />
</div>
</div>
<div data-role="compose-field" class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write album description..." /></textarea>
</div>
</div>
<div data-role="compose-media">
<div class="dropzone">
<div class="inner">
<p>Drop file here</p>
</div>
</div>
<div class="media media-album scroll-x">
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-p.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-square.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-l.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-p.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-p.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-square.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-l.jpg">
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-small-p.jpg">
</div>
</div>
</div>
<div class="addon">
<a class="link link-dark">Organize photos</a>
</div>
</div>
</div>
</div>
</div>
</div>
Upload states
Drop files anywhere
<div data-module="composer">
<a class="btn btn-default" data-toggle="modal" data-target="#modal-photoalbum-upload">Show organizer</a>
<div class="modal modal-fullscreen" id="modal-photoalbum-upload" tabindex="-1" role="dialog" data-role="organize-photos">
<div class="modal-dialog" role="document">
<div class="dropzone">
<div class="inner">
<p>Drop files anywhere</p>
</div>
</div>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Organize photos</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="bar bar-border-side-none bar-border-side-bottom bar-border-color-alpha">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-default disabled">
<span>Sort</span>
<svg type="gl-18-caretb"></svg>
</a>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<label class="btn btn-default pull-left" for="input-photoalbum-add">
<svg type="gl-18-camera"></svg>
<span>Add photos</span>
</label>
<input type="file" id="input-photoalbum-add" multiple>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="album-items">
<div class="inner">
<span class="drag"><svg type="gl-18-photo-album"></svg></span>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306 error">
<div class="holder">
<div class="error" title="Use only JPG, GIF, PNG files, smaller than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Add photo">
<svg type="gl-18-camera"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<div class="loader loader-mode-stretched loader-color-white">
<span><i></i><i></i><i></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Notifications
Drop files anywhere
<div data-module="composer">
<a class="btn btn-default" data-toggle="modal" data-target="#modal-photoalbum-notification">Show organizer</a>
<div class="modal modal-fullscreen" id="modal-photoalbum-notification" tabindex="-1" role="dialog" data-role="organize-photos">
<div class="modal-dialog" role="document">
<div class="dropzone">
<div class="inner">
<p>Drop files anywhere</p>
</div>
</div>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Organize photos</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="bar bar-border-side-none bar-border-side-bottom bar-border-color-alpha">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-default disabled">
<span>Sort</span>
<svg type="gl-18-caretb"></svg>
</a>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<label class="btn btn-default pull-left disabled" for="input-photoalbum-add">
<svg type="gl-18-camera"></svg>
<span>Add photos</span>
</label>
<input type="file" id="input-photoalbum-add" multiple>
</div>
</div>
</div>
</div>
<div class="notif notif-block">
<div class="holder">
<div class="table">
<div class="main text-center">
<p>Maximum 50 photos per album could be published.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="album-items">
<div class="inner">
<span class="drag"><svg type="gl-18-photo-album"></svg></span>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306 error">
<div class="holder">
<div class="error" title="Use only JPG, GIF, PNG files, smaller than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Add photo">
<svg type="gl-18-camera"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<div class="loader loader-mode-stretched loader-color-white">
<span><i></i><i></i><i></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Deleted photos
Drop files anywhere
<div data-module="composer">
<a class="btn btn-default" data-toggle="modal" data-target="#modal-photoalbum-deleted">Show organizer</a>
<div class="modal modal-fullscreen" id="modal-photoalbum-deleted" tabindex="-1" role="dialog" data-role="organize-photos">
<div class="modal-dialog" role="document">
<div class="dropzone">
<div class="inner">
<p>Drop files anywhere</p>
</div>
</div>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Organize photos</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="bar bar-border-side-none bar-border-side-bottom bar-border-color-alpha">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-default disabled">
<span>Sort</span>
<svg type="gl-18-caretb"></svg>
</a>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<label class="btn btn-default pull-left" for="input-photoalbum-add-deleted">
<svg type="gl-18-camera"></svg>
<span>Add photos</span>
</label>
<input type="file" id="input-photoalbum-add-deleted" multiple>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="album-items">
<div class="inner">
<span class="drag"><svg type="gl-18-photo-album"></svg></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit
<div data-module="composer">
<a class="btn btn-default" data-toggle="modal" data-target="#modal-photoalbum-edit">Show organizer</a>
<div class="modal modal-fullscreen" id="modal-photoalbum-edit" tabindex="-1" role="dialog" data-role="organize-photos">
<div class="modal-dialog" role="document">
<div class="dropzone">
<div class="inner">
<p>Drop files anywhere</p>
</div>
</div>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Organize photos</h4>
<button type="button" class="btn btn-transparent close text-uppercase" data-dismiss="modal" aria-label="Close">Done</button>
</div>
<div class="bar bar-border-side-none bar-border-side-bottom bar-border-color-alpha">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-default">
<span>Sort</span>
<svg type="gl-18-caretb"></svg>
</a>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<label class="btn btn-default pull-left" for="input-photoalbum-add">
<svg type="gl-18-camera"></svg>
<span>Add photos</span>
</label>
<input type="file" id="input-photoalbum-add" multiple>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="album-items">
<div class="inner">
<span class="drag"><svg type="gl-18-photo-album"></svg></span>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo1.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo2.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo3.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306 rotate90">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo4.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306 rotate180">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo5.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306 rotate270">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo6.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo7.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo8.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
<div class="album-item">
<div class="thumb thumb-size-306">
<div class="holder">
<img src="../assets/images/samples/organize-photos/photo9.jpg">
</div>
<div class="addon-br">
<div class="btn-group">
<a class="btn btn-default" title="Rotate photo">
<svg type="gl-18-rotate"></svg>
</a>
<a class="btn btn-default" title="Delete photo">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write something about this photo..."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="settings">
<ul class="list-sheetrows">
<li class="list-item" data-role="dark-post">
<div class="main">
<div class="chk chk-box">
<input id="composer-dark-post-1" type="checkbox">
<label for="composer-dark-post-1"><span>Mark as dark post</span></label>
</div>
</div>
<div class="addon">
<span class="meta">No organic distribution</span>
</div>
</li>
<li class="list-item" data-role="schedule">
<div class="main">
<a class="link link-dark icon-link">
Schedule <svg type="gl-16-caretr"></svg>
</a>
</div>
<div class="addon">
<span class="meta">19 March 2015, 23:55</span>
</div>
</li>
<li class="list-item" data-role="limit-audience">
<div class="main">
<a class="link link-dark icon-link">
Limit audience <svg type="gl-16-caretr"></svg>
</a>
</div>
<div class="addon">
<span class="meta">Public</span>
</div>
</li>
<li class="list-item" data-role="target-audience">
<div class="main">
<a class="link link-dark">Target audience</a>
</div>
<div class="addon">
<span class="meta">None</span>
</div>
</li>
</ul>
<div class="textfield mt5" data-role="labels">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Add labels" />
</div>
</div>
</div>
</div>
</div>
When active:
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span> Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="settings">
<ul class="list-sheetrows">
<li class="list-item" data-role="dark-post">
<div class="main">
<div class="chk chk-box">
<input id="composer-dark-post-2" type="checkbox" checked="checked">
<label for="composer-dark-post-2"><span>Mark as dark post</span></label>
</div>
</div>
<div class="addon">
<span class="meta">No organic distribution</span>
</div>
</li>
<li class="list-item" data-role="schedule">
<div class="main">
<a class="link link-dark icon-link">
Schedule <svg type="gl-16-caretr"></svg>
</a>
</div>
<div class="addon">
<span class="meta">19 March 2015, 23:55</span>
</div>
</li>
<li class="list-item" data-role="limit-audience">
<div class="main">
<a class="disabled">Limiting audience unavailable</a>
</div>
<div class="addon">
<svg type="misc-questionmark" title="Dark posts are visible only to admins of the page."></svg>
</div>
</li>
<li class="list-item" data-role="target-audience">
<div class="main">
<a class="disabled">Targeting audience unavailable</a>
</div>
<div class="addon">
<svg type="misc-questionmark" title="Audience of this post will be defined by ads settings."></svg>
</div>
</li>
</ul>
<div class="textfield mt5" data-role="labels">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Add labels" />
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span>
Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="settings">
<ul class="list-sheetrows">
<li class="list-item" data-role="dark-post">
<div class="main">
<div class="chk chk-box">
<input id="composer-dark-post-3" type="checkbox">
<label for="composer-dark-post-3"><span>Mark as dark post</span></label>
</div>
</div>
<div class="addon">
<span class="meta">No organic distribution</span>
</div>
</li>
<li class="list-item" data-role="schedule">
<div class="main">
<a class="link link-dark icon-link">
Schedule
<svg type="gl-16-caretr">
</svg>
</a>
</div>
<div class="addon">
<span class="meta">19 March 2015, 23:55</span>
</div>
</li>
<li class="list-item" data-role="limit-audience">
<div class="main">
<div class="dropdown">
<a data-toggle="dropdown" class="link link-dark icon-link">
Limit audience
<svg type="gl-16-caretr"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">
Public
<span class="meta">Visible to everybody</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a data-toggle="modal" data-target="#modal-limit-audience">
<span class="prefix">
</span>
<span class="text">
By Demography or Location
<span class="meta">Visible to custom audience</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="addon">
<span class="meta">Visible to certain audience</span>
</div>
</li>
<li class="list-item" data-role="target-audience">
<div class="main">
<a class="link link-dark">Target audience</a>
</div>
<div class="addon">
<span class="meta">None</span>
</div>
</li>
</ul>
<div class="textfield mt5" data-role="labels">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Add labels"/>
</div>
</div>
<!-- Modals -->
<div class="modal fade" id="modal-limit-audience" tabindex="-1" role="dialog" data-role="limit-audience">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">limit visibility of this post</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close">
<svg type="gl-18-cross">
</svg>
</button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
Limit who can see this post on Facebook based on their demographics or location. For
example: If you enter "Spanish" below, only people who have Spanish set as their
language on Facebook or list Spanish as one of their languages on their profile will
be eligible to see your post on your Page, in News Feed and in search. <a href="#">Learn
more.</a>
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label>
Age, Gender
<svg type="misc-questionmark"
title="Select who can see this post based on age and gender."
data-qtip-my="left center" data-qtip-at="right center">
</svg>
</label>
</div>
</div>
<div class="elm">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
<span>13</span>
<svg type="gl-18-caretb">
</svg>
</button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">13</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">14</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">15</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">16</span>
</a>
</li>
</ul>
</div>
<span>-</span>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
<span>65+</span>
<svg type="gl-18-caretb">
</svg>
</button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">15</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">25</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">35</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">65+</span>
</a>
</li>
</ul>
</div>
</div>
<div class="btn-group">
<a href="#" class="btn btn-default selected">All</a>
<a href="#" class="btn btn-default">Men</a>
<a href="#" class="btn btn-default">Women</a>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item2">
Location
<svg type="misc-questionmark"
title="Select countries or cities to show this post only to people in those locations.">
</svg>
</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example1-item2"
class="textfield-input"
type="text"
placeholder="Type to select country or city"/>
<div class="textfield-addon">
<span class="data">25</span>
</div>
</div>
</div>
<!-- Autocomplete -->
<div class="dropdown-autocomplete hidden">
<ul class="list-blocks list-blocks-white list-blocks-tight list-blocks-nogap">
<li class="list-item selected">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>So</b>fia, Bulgaria
</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>So</b>zopol, Bulgaria
</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>So</b>pot, Bulgaria
</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Selected items -->
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Sofia, Bulgaria <span
class="meta">+20 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-transparent">
<svg type="gl-18-gear">
</svg>
</a>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">
+5km
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">
+10km
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">
+15km
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">
+20km
</span>
</a>
</li>
</ul>
</div>
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Copenhagen, Denmark</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item3">
Language
<svg type="misc-questionmark"
title="Leave this blank unless the people you are targeting use a language that is uncommon in the target area."></svg>
</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example1-item3"
class="textfield-input"
type="text" placeholder="Type to select language"/>
<div class="textfield-addon">
<span class="data">50</span>
</div>
</div>
</div>
<!-- Autocomplete dropdown -->
<div class="dropdown-autocomplete hidden">
<ul class="list-blocks list-blocks-white list-blocks-nogap list-blocks-tight">
<li class="list-item selected">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>En</b>glish (All)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>En</b>glish (UK)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>En</b>glish (US)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Selected items -->
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">English (All)</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Bulgarian</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">save</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a><span class="glyphicon"><svg type="gl-16-text"></svg></span>
Status</a>
</li>
<li>
<a><span class="glyphicon"><svg type="gl-16-photo-album"></svg></span> Photo album</a>
</li>
</ul>
</div>
<div class="panel-body">
<div data-role="settings">
<ul class="list-sheetrows">
<li class="list-item" data-role="dark-post">
<div class="main">
<div class="chk chk-box">
<input id="composer-dark-post-4" type="checkbox">
<label for="composer-dark-post-4"><span>Mark as dark post</span></label>
</div>
</div>
<div class="addon">
<span class="meta">No organic distribution</span>
</div>
</li>
<li class="list-item" data-role="schedule">
<div class="main">
<a class="link link-dark icon-link">
Schedule
<svg type="gl-16-caretr">
</svg>
</a>
</div>
<div class="addon">
<span class="meta">19 March 2015, 23:55</span>
</div>
</li>
<li class="list-item" data-role="limit-audience">
<div class="main">
<div class="dropdown">
<a data-toggle="dropdown" class="link link-dark icon-link">
Limit audience
<svg type="gl-16-caretr">
</svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">
Public
<span class="meta">Visible to everybody</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a>
<span class="prefix">
</span>
<span class="text">
By Demography or Location
<span class="meta">Visible to custom audience</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="addon">
<span class="meta">Visible to certain audience</span>
</div>
</li>
<li class="list-item" data-role="target-audience">
<div class="main">
<a class="link link-dark" data-toggle="modal" data-target="#modal-target-audience">Target
audience</a>
</div>
<div class="addon">
<span class="meta">None</span>
</div>
</li>
</ul>
<div class="textfield mt5" data-role="labels">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Add labels"/>
</div>
</div>
<!-- Modals -->
<div class="modal fade" id="modal-target-audience" tabindex="-1" role="dialog" data-role="target-audience">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">limit visibility of this post</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal"
aria-label="Close">
<svg type="gl-18-cross">
</svg>
</button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
Choose the people you'd like to reach in News Feed. People in this group are more
likely to see your post. Facebook will reach specific audiences by looking at their
interests, activities, the Pages they have liked and closely related topics. You can
choose up to 16 interests. <a class="link link-dark">Learn more</a>.
<div class="target-audience-content">
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="text">
Business and Industry <span
class="meta>">/</span> Banking
<div class="labels">
<span class="tag">
<span class="close"></span>
<span class="main">Advertising</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Business Banking</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Online Banking</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="text">
Family and Relationships
<div class="labels">
<span class="tag">
<span class="close"></span>
<span class="main">Friendship</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Family</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Marriage</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="text">
Food and drink <span class="meta">/</span>
Alcoholic beverages
<div class="labels">
<span class="tag">
<span class="close"></span>
<span class="main">Beer</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Distilled beverage</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Wine</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Coffee</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Energy drinks</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Fast casual restaurants</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Coffeehouses</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Fast food restaurants</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Something very long could happens could
happens to be written here 123 test</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-trash">
</svg>
</a>
</div>
</div>
</li>
</ul>
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text"
id="form-textfield-example1-item4"
placeholder="Search for interests"/>
<div class="textfield-addon">
<span class="data">16</span>
</div>
</div>
</div>
<!-- Autocomplete -->
<div class="dropdown-autocomplete hidden">
<ul class="list-blocks list-blocks-white list-blocks-nogap list-blocks-tight">
<li class="list-item selected">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>Frien</b>dship
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">Family and relationship</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
<b>Frien</b>ds
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">Family and relationship</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">
Words with <b>Frien</b>ds
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">Family and relationship</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Audience tree -->
<div class="dropdown-audience-tree hidden">
<ul class="nav nav-tree nav-tree-checklist">
<li class="panel level1" id="branch1" aria-expanded="true">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr">
</svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-1">First item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1" type="checkbox">
<label for="tcl-checkbox-example-1"></label>
</div>
</div>
</li>
<li class="panel level2" data-parent="#branch1" id="branch11"
aria-expanded="true">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr">
</svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-1-1">Level 2 First item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-1" type="checkbox">
<label for="tcl-checkbox-example-1-1"></label>
</div>
</div>
</li>
<li class="panel level3" data-parent="#branch11">
<div class="addon"></div>
<div class="main">
<label for="tcl-checkbox-example-1-1-1">Level 3 First
item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-1-1" type="checkbox">
<label for="tcl-checkbox-example-1-1-1"></label>
</div>
</div>
</li>
<li class="panel level2" data-parent="#branch1">
<div class="addon"></div>
<div class="main">
<label for="tcl-checkbox-example-1-2">Level 2 Second
item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-2" type="checkbox">
<label for="tcl-checkbox-example-1-2"></label>
</div>
</div>
</li>
<li class="panel level1" id="branch2">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr">
</svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-2">Second item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-2" type="checkbox">
<label for="tcl-checkbox-example-2"></label>
</div>
</div>
</li>
<li class="panel level1" id="branch3">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr">
</svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-3">Third item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-3" type="checkbox">
<label for="tcl-checkbox-example-3"></label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">save</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-footer cf">
<div data-role="boost" class="pull-left">
<a class="btn btn-default" data-toggle="modal" data-target="#composer-boost-auto">Boost set to auto</a>
<div class="modal fade" id="composer-boost-auto" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Boost post with ads</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
<p>Your post will be boosted as set by advertiser. Use ad labels for additional boosting with predefined targeting, budgeting and duration. <a class="link">Learn more.</a></p>
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item2">Ad labels <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield-addon">
<div class="loader loader-size-small mt10">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item1">Duration</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Multiple durations</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else here</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item1">Ad sets</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<span class="mt10 in-block"><a class="link">Hide ad sets</a></span>
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-1" type="checkbox" checked="checked">
<label for="list-blocks-checkbox-example-1"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-2" type="checkbox">
<label for="list-blocks-checkbox-example-2"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-3" type="checkbox">
<label for="list-blocks-checkbox-example-3"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
<div class="msg msg-type-warning mt20">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>This post will be boosted by 9 ads within 2 objectives. <br/><a class="link">Read more.</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer cf">
<div class="pull-left">
<a class="btn btn-secondary">Custom Boosting</a>
</div>
<div class="pull-right">
<a class="btn btn-default" data-dismiss="modal">Don't Boost</a>
<a class="btn btn-primary" data-dismiss="modal">Set Boost</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="composer">
<div class="panel-footer cf">
<div data-role="boost" class="pull-left">
<a class="btn btn-default" data-toggle="modal" data-target="#composer-boost-custom">Boost set to custom</a>
<div class="modal fade" id="composer-boost-custom" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Boost post with ads</h4>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
<p>Create single or multiple ads for this post. Set your preferred budgeting or targeting. Available ad sets are filtered based on post type. <a class="link">Learn more.</a></p>
<form class="form form-ll">
<div class="elm-group">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-budget1">Budget <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area" style="width: 107px;">
<input id="form-textfield-budget1" class="textfield-input" type="text" placeholder="e.g. 100.5" />
</div>
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1"><span>DKK</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Lifetime</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else here</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>End date <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield-addon">
<a class="btn btn-default mr10">
<svg type="gl-18-chart-bars"></svg>
<span>10 Nov 15</span>
</a>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>12</span></button>
<ul class="dropdown-box dropdown-menu fixed-size-dropdown">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">1</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">2</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">3</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">4</span>
</a>
</li>
</ul>
</div>
<span class="time-dots">:</span>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>15</span></button>
<ul class="dropdown-box dropdown-menu fixed-size-dropdown">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">16</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">17</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">18</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">19</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Targeting <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield-addon">
<div class="loader loader-size-small mt10">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Campaign <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield-addon">
<div class="loader loader-size-small mt10">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-name1">Ad set name <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-name1" class="textfield-input" type="text" placeholder="Give name to your new ad set" />
</div>
</div>
</div>
</div>
</div>
<div class="elm-group">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-budget2">Budget <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area" style="width: 107px;">
<input id="form-textfield-budget2" class="textfield-input" type="text" placeholder="e.g. 100.5" />
</div>
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1"><span>DKK</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Lifetime</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else here</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>End date <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield-addon">
<a class="btn btn-default mr10">
<svg type="gl-18-chart-bars"></svg>
<span>10 Nov 15</span>
</a>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>12</span></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">1</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">2</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">3</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">4</span>
</a>
</li>
</ul>
</div>
<span class="time-dots">:</span>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>15</span></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">16</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">17</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">18</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">19</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-name2">Ad set name <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-name2" class="textfield-input" type="text" placeholder="Give name to your new ad set" />
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner"></div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner"></div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<a class="btn btn-default">
<svg type="gl-18-plus"></svg>
<span>Create new ad</span>
</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer cf">
<div class="pull-left">
<a class="btn btn-secondary">Auto Boosting</a>
</div>
<div class="pull-right">
<a class="btn btn-default" data-dismiss="modal">Don't Boost</a>
<a class="btn btn-primary faded">Set Boost</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.
Get insights of your fan base.
www.adidas.com
Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.
Get insights of your fan base.
www.adidas.com
Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.
Get insights of your fan base.
www.adidas.com
Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.
Get insights of your fan base. That's what it said on 'Ask Jeeves.
Get insights of your fan base.
Get insights of your fan base.
www.adidas.com
Get insights of your fan base.
www.adidas.com
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base.
Get insights of your fan base. That's what it said on 'Ask Jeeves.
<div data-module='content-planner' data-view='weekly'>
<div class="day-holder">
<div class="day past">
<div>
<div class="date">
<span class="week-day">Mon</span>
<span class="day-month">24 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item old">
<div class="handle">
<span class="time">6:45</span>
<div class="status not-published">
<svg type="misc-exclamation-mark"></svg>
<span>Not published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-4.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Album</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item old">
<div class="handle">
<span class="time">6:45</span>
<div class="status">
<span>Published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Album</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item old">
<div class="handle">
<span class="time">6:45</span>
<div class="status">
<span>Published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Women Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>5 images</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
</div>
</div>
<div class="day past">
<div>
<div class="date">
<span class="week-day">Tue</span>
<span class="day-month">25 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item old">
<div class="handle">
<span class="time">6:00</span>
<div class="status not-published">
<svg type="misc-exclamation-mark"></svg>
<span>Not published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Adidas Summer</span>
<span class="meta"><i class="social"><svg type="social-12-li"></svg></i> Linkedin</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.</p>
</div>
<div class="dark"></div>
</div>
</div>
<div class="item old">
<div class="handle">
<span class="time">9:15</span>
<div class="status">
<span>Published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-4.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google+</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Link</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p class="text-overflow">Get insights of your fan base.</p>
<p class="text-overflow text-col-system text-size-13">www.adidas.com</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item old">
<div class="handle">
<span class="time">9:15</span>
<div class="status">
<span>Published</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-tw"></svg></i> Twitter</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.</p>
</div>
<div class="dark"></div>
</div>
</div>
</div>
</div>
<div class="day today">
<div>
<div class="date">
<span class="week-day">Wed</span>
<span class="day-month">26 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item old" data-hourmarker="15:45">
<div class="handle">
<span class="time">9:15</span>
<div class="status">
<span>Published</span>
</div>
</div>
<div class="card tooltip-weekly-planner-card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Link</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p class="text-overflow">Get insights of your fan base.</p>
<p class="text-overflow text-col-system text-size-13">www.adidas.com</p>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">18:00</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Women Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-li"></svg></i> Linkedin</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.</p>
</div>
</div>
</div>
<div class="item draft">
<div class="handle">
<span class="time">21:15</span>
<div class="status">
<span>Draft</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Women Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google+</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Link</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p class="text-overflow">Get insights of your fan base.</p>
<p class="text-overflow text-col-system text-size-13">www.adidas.com</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
</div>
</div>
<div class="day">
<div>
<div class="date">
<span class="week-day">Thu</span>
<span class="day-month">27 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item draft">
<div class="handle">
<span class="time">15:25</span>
<div class="status">
<span>Draft</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-gp"></svg></i> Google+</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine.</p>
</div>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">15:25</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-1.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-tw"></svg></i> Twitter</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.</p>
</div>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item draft">
<div class="handle">
<span class="time">6:55</span>
<div class="status">
<span>Draft</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-1.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Video</span>
<svg type="gl-18-video-camera"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<div class="dark"></div>
</div>
</div>
</div>
</div>
<div class="day">
<div>
<div class="date">
<span class="week-day">Fri</span>
<span class="day-month">28 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item">
<div class="handle">
<span class="time">6:00</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Women Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Carousel</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p class="text-overflow">Get insights of your fan base.</p>
<p class="text-overflow text-col-system text-size-13">www.adidas.com</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item draft">
<div class="handle">
<span class="time">6:00</span>
<div class="status">
<span>Draft</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Carousel</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p class="text-overflow">Get insights of your fan base.</p>
<p class="text-overflow text-col-system text-size-13">www.adidas.com</p>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">6:00</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-4.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Carousel</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
</div>
</div>
<div class="day">
<div>
<div class="date">
<span class="week-day">Sat</span>
<span class="day-month">29 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item">
<div class="handle">
<span class="time">21:00</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-4.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>1 image</span>
<svg type="gl-18-photo"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
</div>
</div>
<div class="item draft">
<div class="handle">
<span class="time">21:00</span>
<div class="status">
<span>Draft</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Video</span>
<svg type="gl-18-video-camera"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">21:00</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>3 images</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
</div>
</div>
</div>
</div>
<div class="day">
<div>
<div class="date">
<span class="week-day">Sun</span>
<span class="day-month">30 Apr</span>
</div>
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-16-plus"></svg>
</button>
</div>
<div class="items">
<div class="item">
<div class="handle">
<span class="time">6:55</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Video</span>
<svg type="gl-18-video-camera"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<div class="dark"></div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">6:55</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-3.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Women Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="thumb thumb-media media-thumb">
<div class="holder">
<img src="../assets/images/samples/adidas-shoes-01.jpg">
</div>
<div class="addon-b footer">
<span>Album</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
<div class="text">
<p>Get insights of your fan base.</p>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
</div>
</div>
<div class="item">
<div class="handle">
<span class="time">15:25</span>
<div class="status">
<span>Sheduled</span>
</div>
</div>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="text">
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.</p>
</div>
<div class="label">
<svg type="gl-12-label"></svg>
<span>3 labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-container">
<a class="btn link link-gray" role="button">More posts</a>
</div>
</div> <!-- // [data-module='content-planner'][data-view='weekly'] -->
<!-- NOTE: The the following html below is used for example purposes only. -->
<div class="tooltip-weekly-planner-card-content" style="display: none">
<div class="maxw350 minw200 overflow-y">
<div class="flex flex-ai-center">
<div class="flex-g-1 meta meta-group">
<span>
<svg type="gl-18-chain" viewBox="0 0 18 18"><path d="M14,4V9c0,1.3-.84,3.4-2,3.82V4a1,1,0,0,0-1-1H9A1,1,0,0,0,8,4v8.82C6.84,12.4,6,10.3,6,9V4A3,3,0,0,1,9,1h2A3,3,0,0,1,14,4ZM9,4.18V13a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V4.18A3,3,0,0,0,3,7v6a3,3,0,0,0,3,3H8a3,3,0,0,0,3-3V7A3,3,0,0,0,9,4.18Z"></path></svg>
Link post
</span>
<span>published on</span>
</div>
<span class="tag">
<span class="prefix">$</span>
<span class="main">boosted</span>
</span>
</div>
<div class="card mv10">
<picture class="avatar">
<img src="../assets/images/samples/avatar-adidas-2.jpg" width="32" height="32" alt="Adidas">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Men's Adidas</span>
<span class="meta"><i class="social"><svg type="social-12-fb" viewBox="0 0 12 12"><rect class="body" width="12" height="12"></rect><path class="symbol" d="M7.67,12V7.89H9L9.2,6.3H7.67v-1a0.65,0.65,0,0,1,.76-0.78H9.25V3.06A10.62,10.62,0,0,0,8.06,3a1.89,1.89,0,0,0-2,2.12V6.3H4.75v1.6H6.08V12H7.67Z"></path></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
<p>Get insights of your fan base. That's what it said on 'Ask Jeeves.' I'm half machine. I'm a monster. It's a hug, Michael. I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</p>
<div class="mt10 tags">
<span class="tag tag-face-light">
<span class="main">Shoes Campaigns</span>
</span>
<span class="tag tag-face-light">
<span class="main">Youths Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="main">Youth Fashion Shoes Campaign</span>
</span>
</div>
</div>
</div>
<!-- NOTE: The script below is just for UI purposes. It keeps equal height of all items in a row -->
<script>
function equalItemsHeight() {
// Helper variables
var weeklyPlanner = $('[data-module=content-planner][data-view=weekly]'),
colItems,
rowItems,
maxDayItems = 0,
tallestItem = 0;
// Find the maximum amount of items for a single column (day)
for(var i = 1; i <= 7; i++) {
colItems = weeklyPlanner.find('.day:nth-child('+ i +') .items .item');
maxDayItems = maxDayItems > colItems.length ? maxDayItems : colItems.length;
}
// Set equal (tallest) height for each item in a row
for(var i = 1; i <= maxDayItems; i++) {
rowItems = weeklyPlanner.find('.day .items .item:nth-child('+ i +')');
rowItems.each(function () {
var item = $(this);
item.css('height', ''); // reset item height (if any)
tallestItem = tallestItem > item.outerHeight() ? tallestItem : item.outerHeight(); // set tallest item
});
rowItems.css('height', tallestItem); // set 'height' of all items in a row
tallestItem = 0; // reset tallest item variable
}
}
window.onload = function () {
equalItemsHeight();
};
window.onresize = function () {
equalItemsHeight();
};
$('.tooltip-weekly-planner-card').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-weekly-planner-card-content').clone() },
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
</script>
<div data-module="content-planner" data-view='monthly'>
<div class="weekdays">
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
<div>Sun</div>
</div>
<div class="day-holder">
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">26</span>
<div class="items">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
<svg type="misc-exclamation-mark" title="The item hasn't been posted."></svg>
</div>
<div class="item-tooltip hidden">
<div class="maxw350 overflow-y">
<div class="meta meta-group">
<span>
<svg type="gl-12-text"></svg>
Text post
</span>
<span>
<svg type="misc-exclamation-mark"
title="The item hasn't been posted."></svg>
not published on
</span>
</div>
<div class="card mt5">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32"
height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Ecco</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
<p>
Get insights of your fan base. That's what it said on 'Ask Jeeves.'
I'm half machine. I'm a monster. It's a hug, Michael. I'm hugging you.
</p>
<div class="mt10">
<span class="tag tag-face-light">
<span class="main">Shoes Campaigns</span>
</span>
<span class="tag tag-face-light">
<span class="main">Youths Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="main">Youth Fashion Shoes Campaign</span>
</span>
</div>
</div>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-tw"></svg></i>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-ig"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<a class="all link">See all 7</a>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">27</span>
<div class="items">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
<svg type="misc-exclamation-mark" title="The item hasn't been posted."></svg>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">28</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">29</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">30</span>
<div class="items">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-li"></svg></i>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-gp"></svg></i>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-yt"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">31</span>
<div class="items">
<div class="item dark old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
<div class="item-tooltip hidden">
<div class="maxw350 overflow-y">
<div class="meta meta-group">
<span>
<svg type="gl-12-photo"></svg>
Dark post
</span>
<span>
published on
</span>
</div>
<div class="card mt5">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32"
height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Ecco</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
<p>
Get insights of your fan base. That's what it said on 'Ask Jeeves.'
</p>
<div class="mt10">
<span class="tag tag-face-light">
<span class="main">Shoes Campaigns</span>
</span>
<span class="tag tag-face-light">
<span class="main">Youths Campaign</span>
</span>
</div>
</div>
</div>
</div>
<div class="item dark old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-ig"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">Oct 1</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">2</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">3</span>
<div class="items">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box past">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">4</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box today">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">5</span>
<div class="items">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-tw"></svg></i>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">15:30</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<a class="all link">See all 11</a>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">6</span>
<div class="items">
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-gp"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-tw"></svg></i>
<span class="time">8:30</span>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-ig"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">7</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">8</span>
<div class="items">
<div class="item dark">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item dark">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">11:30</span>
</div>
<span class="text">Are you using an old computer?</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-yt"></svg></i>
<span class="time">16:00</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-li"></svg></i>
<span class="time">22:30</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">9</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">10</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">11</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">12</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">13</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">14</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">15</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">16</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">17</span>
<div class="items">
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<a class="all link">See all 6</a>
</div>
</div>
<div class="popover on">
<header class="cf">
<div class="pull-left">
<strong class="date">17 October 2016</strong>
</div>
<div class="pull-right">
<button type="button" class="btn btn-sm btn-transparent themed add">
<svg type="gl-18-cross">
</svg>
</button>
</div>
</header>
<div class="items scroll-y">
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item old">
<div class="contents">
<div class="handle">
<i class="social"><svg class="disabled" type="social-12-fb"></svg></i>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item dark">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">12:00</span>
</div>
<span class="text">Get insights of your fan base. That's what it said on 'Ask Jeeves.'</span>
</div>
</div>
<div class="item dark">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">14:50</span>
</div>
<span class="text">Half machine. I'm a monster. It's a hug, Michael.</span>
</div>
</div>
<div class="item dark">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
</div>
</div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">18</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">19</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">20</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">21</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">22</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">23</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">24</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">25</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">26</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">27</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">28</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">29</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">30</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">31</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">Nov 1</span>
<div class="items">
<div class="item">
<div class="contents">
<div class="handle">
<i class="social"><svg type="social-12-fb"></svg></i>
<span class="time">20:30</span>
</div>
<span class="text">I'm hugging you. There's only one man I've ever called a coward, and that's Brian Doyle Murray.</span>
</div>
</div>
</div>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">2</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">3</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">4</span>
</div>
<div class="popover"></div>
</div>
<div class="day">
<div class="box">
<button type="button" class="btn btn-transparent themed add">
<svg type="gl-18-plus">
</svg>
</button>
<span class="day-title">5</span>
</div>
<div class="popover"></div>
</div>
</div>
</div>
This is how the preview container looks when there is nothing to show yet:
Waiting for your post to build the preview.
Waiting for your post to build the preview.
Waiting for your post to build the preview.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a href="#publish-preview-basic-tab1" data-toggle="tab">Quick preview</a>
</li>
<li>
<a href="#publish-preview-basic-tab2" data-toggle="tab">Desktop preview</a>
</li>
<li>
<a href="#publish-preview-basic-tab3" data-toggle="tab">Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick" id="publish-preview-basic-tab1">
<div data-role="ground">
<div class="content">
<p class="mb20"><svg class="sys-col-gray sys-size-s" type="sys-empty-box"></svg></p>
<p>Waiting for your post to build the preview.</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="desktop" id="publish-preview-basic-tab2">
<div data-role="ground">
<div class="content">
<p class="mb20"><svg class="sys-col-gray sys-size-s" type="sys-empty-box"></svg></p>
<p>Waiting for your post to build the preview.</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="mobile" id="publish-preview-basic-tab3">
<div data-role="ground">
<div class="content">
<p class="mb20"><svg class="sys-col-gray sys-size-s" type="sys-empty-box"></svg></p>
<p>Waiting for your post to build the preview.</p>
</div>
</div>
</div>
</div>
</div>
ECCO is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs. Good news, everyone! I've taught the toaster to feel love! I love you, buddy! Ow, my spirit! Belligerent and numerous. And until then, I can never die? You lived before you met me?!
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>ECCO</a> is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Good news, everyone! I've taught the toaster to feel love! I love you, buddy! Ow, my spirit! Belligerent and numerous. And until then, I can never die? You lived before you met me?!</p>
</div>
</div>
</div>
</div>
</div>
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link">
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Book Travel</a>
</div>
</div>
</div>
</div>
</div>
Each post-link box that contains a link with one image must also have a data-attachment="single" attribute.
In case of a single image there are various layouts depending on the image's dimensions.
The first check to be made must be for the image's width. There are two possible layouts depending on the result - one for thumb images and another for cover images.
If the image's width is less (<) than 490px (no matter the height), the image should be treated as a thumb. This has to be marked by adding a data-image="thumb" attribute to the post-link container.
Example of a tiny image (30x30):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="thumb">
<div class="image">
<img src="../assets/images/samples/30x30.jpg" width="30" height="30" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Learn More</a>
</div>
</div>
</div>
</div>
</div>
Example of a landscape image (200x100):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="thumb">
<div class="image">
<img src="../assets/images/samples/200x100.jpg" width="200" height="100" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Book Travel</a>
</div>
</div>
</div>
</div>
</div>
Example of a portrait image (100x300):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="thumb">
<div class="image">
<img src="../assets/images/samples/100x300.jpg" width="100" height="300" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
Example of an image with big aspect ratio (800х2400):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="thumb">
<div class="image">
<img src="../assets/images/samples/800x2400.jpg" width="800" height="2400" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
If the image's width is bigger or equal (>=) to 490px, the image should be treated as a cover, but that's only if the aspect ratio is bigger or equal to 0.5. So, if the image is a cover one, this has to be marked by adding a data-image="cover" attribute to the post-link container.
Note: If the aspect ratio of the image less (<) than 0.5, the image must be treated as a thumb.
Now, there's one more check that needs to be made. If the aspect ratio is bigger (>) than 0.5 and smaller (<) than 1, the .image container must be also populated with a portrait class.
Example of a square image (490x490):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="cover">
<div class="image">
<img src="../assets/images/samples/490x490.jpg" width="490" height="490" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Learn More</a>
</div>
</div>
</div>
</div>
</div>
Example of a landscape image (1500x500):
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="cover">
<div class="image">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
Example of a portrait image (600x1200):
Note: There's also a portrait class to the .image container.
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
Sign up for ECCO’s Market newsletter today
ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="single" data-image="cover">
<div class="image portrait">
<img src="../assets/images/samples/600x1200.jpg" width="600" height="1200" alt="Sign up for ECCO’s Market newsletter today">
</div>
<div class="content">
<p class="ttl">Sign up for ECCO’s Market newsletter today</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<a class="btn btn-default btn-sm cta">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
Each post-link box that contains a link with two or more images must also have a data-attachment="multiple" attribute.
www.eccos-market.com
ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>www.eccos-market.com</a><br> ECCO’s is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-link" data-attachment="multiple">
<div class="carousel">
<div class="carousel-viewport">
<div class="carousel-overview">
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" width="600" height="1200" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">You know when grown-ups tell you 'everything's going to be fine' and you think they're probably...</a>
</div>
<a class="btn btn-default btn-sm cta">Book Travel</a>
</div>
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">Sign up for ECCO’s Market newsletter today | ECCO Golf</a>
</div>
</div>
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" width="600" height="1200" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">You know when grown-ups tell you 'everything's going to be fine' and you think they're probably...</a>
</div>
<a class="btn btn-default btn-sm cta">Book Travel</a>
</div>
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">Sign up for ECCO’s Market newsletter today | ECCO Golf</a>
</div>
</div>
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" width="600" height="1200" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">You know when grown-ups tell you 'everything's going to be fine' and you think they're probably...</a>
</div>
<a class="btn btn-default btn-sm cta">Book Travel</a>
</div>
<div class="carousel-item">
<div class="thumb thumb-size-300">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500" alt="Sign up for ECCO’s Market newsletter today">
</div>
</div>
<div class="title">
<a class="link link-dark">Sign up for ECCO’s Market newsletter today | ECCO Golf</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of small photo:
ECCO is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>ECCO</a> is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-photo">
<img src="../assets/images/samples/200x200.jpg" alt="ECCO Golf" width="200" height="200">
</div>
</div>
</div>
</div>
</div>
Example of big photo:
Good news, everyone! I've taught the toaster to feel love! I love you, buddy! Ow, my spirit! Belligerent and numerous. And until then, I can never die? You lived before you met me?!
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p>Good news, everyone! I've taught the toaster to feel love! I love you, buddy! Ow, my spirit! Belligerent and numerous. And until then, I can never die? You lived before you met me?!</p>
</div>
<div data-role="post-photo">
<img src="../assets/images/samples/1300x721.jpg" alt="ECCO Golf" width="1300" height="721">
</div>
</div>
</div>
</div>
</div>
ECCO is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>ECCO</a> is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-video">
<div class="ground">
<svg type="misc-videotape"></svg>
</div>
<div class="info">
<svg type="gl-18-video-camera"></svg> <label><span class="name">video-name.mov</span> uploaded</label>
</div>
</div>
</div>
</div>
</div>
</div>
Note: The .cover box must be placed before the .ground box, otherwise it won't work properly.
Example with small cover:
ECCO is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>ECCO</a> is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-video">
<div class="cover">
<img src="../assets/images/samples/96x96.jpg" alt="Ecco Golf" width="96" height="96">
</div>
<div class="ground">
<svg type="misc-videotape"></svg>
</div>
<div class="info">
<svg type="gl-18-video-camera"></svg> <label><span class="name">Sport-Shoes.mov</span> uploaded</label>
</div>
</div>
</div>
</div>
</div>
</div>
Example with big cover:
ECCO is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><a>ECCO</a> is excited to celebrate the world of shoes this September. ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
</div>
<div data-role="post-video">
<div class="cover">
<img src="../assets/images/samples/1000x819.jpg" alt="Ecco Golf" width="1000" height="819">
</div>
<div class="ground">
<svg type="misc-videotape"></svg>
</div>
<div class="info">
<svg type="gl-18-video-camera"></svg> <label><span class="name">This-is-some-long-long-titled-video-created-just-for-test-purposes.mov</span> uploaded</label>
</div>
</div>
</div>
</div>
</div>
</div>
There are various layouts for photo albums depending on the number of the uploaded photos. If the album contains one, two or three images, the layouts that covers those cases are all different. And if the images are four or more, there are another three types of structures depending on the orientation of the first image in the album. Those structures cover cases where the first image can be square, or landscape or portrait oriented. Here are some examples:
Example of photo album with one small image:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(1 photo)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/shoes-small.jpg" alt="Shoe Fest 2015" width="200" height="200">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: If the width/height of the photo is bigger than 494px/330px, the <img> element must be populated with class big.
Example of photo album with one big square image:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(1 photo)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/shoes-behind.jpg" alt="Shoe Fest 2015" width="800" height="800">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of photo album with one big landscape image:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(1 photo)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/shoes-side.jpg" alt="Shoe Fest 2015" width="830" height="524">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of photo album with one big portrait image:
Note: A big photo with a portrait orientation must be populated with class portrait.
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(1 photo)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/shoes-front.jpg" alt="Shoe Fest 2015" width="600" height="900">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: If the width or the height of the photo is bigger than 246px, the <img> element must be populated with class big. Also a big photo with a portrait orientation must be populated with class portrait.
Example of album with two big portrait photos:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(2 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/nav-sportmen.jpg" alt="Shoe Fest 2015" width="564" height="576">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/nav-sportwomen.jpg" alt="Shoe Fest 2015" width="564" height="576">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of album with two small photos:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(2 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/200x200.jpg" alt="Shoe Fest 2015" width="200" height="200">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/shoes-small.jpg" alt="Shoe Fest 2015" width="200" height="200">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: If the width or the height of the first photo is bigger than 329px, the <img> element must be populated with class big. Also a big photo with a portrait orientation must be populated with class portrait.
Example of photo album with three images:
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(3 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" alt="Shoe Fest 2015" width="600" height="1200">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/490x490.jpg" alt="Shoe Fest 2015" width="490" height="490">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" alt="Shoe Fest 2015" width="1500" height="500">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of photo album with first square image:
Note: If the width or the height of the photos is bigger than 246px, the <img> elements must be populated with class big. Also a big photo with a portrait orientation must be populated with class portrait.
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(4 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/490x490.jpg" alt="Shoe Fest 2015" width="490" height="490">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" alt="Shoe Fest 2015" width="600" height="1200">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" alt="Shoe Fest 2015" width="1500" height="500">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/800x2400.jpg" alt="Shoe Fest 2015" width="800" height="2400">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of photo album with first landscape image:
Note: If the width/height of the first photo is bigger than 494px/329px, the <img> elements must be populated with class big.
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(4 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album" class="cover-landscape">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" alt="Shoe Fest 2015" width="1500" height="500">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/490x490.jpg" alt="Shoe Fest 2015" width="490" height="490">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" alt="Shoe Fest 2015" width="600" height="1200">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/800x2400.jpg" alt="Shoe Fest 2015" width="800" height="2400">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example of photo album with first portrait image:
Note: If the width/height of the first photo is bigger than 329px/494px, the <img> elements must be populated with class big and class portrait.
Shoe Fest 2015
ECCO’s is excited to celebrate the world of shoes this September.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a>Quick preview</a>
</li>
<li>
<a>Desktop preview</a>
</li>
<li>
<a>Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="quick">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p><strong>Shoe Fest 2015</strong> <span class="meta">(4 photos)</span><br>
ECCO’s is excited to celebrate the world of shoes this September.</p>
</div>
<div data-role="post-photo-album" class="cover-portrait">
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg" alt="Shoe Fest 2015" width="600" height="1200">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/490x490.jpg" alt="Shoe Fest 2015" width="490" height="490">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" alt="Shoe Fest 2015" width="1500" height="500">
</div>
</div>
<div class="photo thumb">
<div class="holder">
<img src="../assets/images/samples/800x2400.jpg" alt="Shoe Fest 2015" width="800" height="2400">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Only Facebook has Desktop / Mobile preview tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nisi tristique, lobortis felis vitae, ultricies nulla. Ut suscipit, justo et porta euismod, felis dui maximus velit, non aliquam ex odio eu sapien. Nulla venenatis lorem risus, vel feugiat neque congue ac. Duis condimentum, turpis ac fringilla placerat, lorem justo faucibus nulla, a ultricies erat sem et lorem.
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li>
<a href="#publish-preview-real-quick-1" data-toggle="tab">Quick preview</a>
</li>
<li class="active">
<a href="#publish-preview-real-desktop-1" data-toggle="tab">Desktop preview</a>
</li>
<li>
<a href="#publish-preview-real-mobile-1" data-toggle="tab">Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane" id="publish-preview-real-quick-1">
<div class="preview-box">
<div class="card card-size-big">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta"><span>now</span><span><svg type="gl-12-padlock"></svg></span></span>
</div>
</div>
</div>
</div>
<div class="text" data-role="post-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nisi tristique, lobortis felis vitae, ultricies nulla. Ut suscipit, justo et porta euismod, felis dui maximus velit, non aliquam ex odio eu sapien. Nulla venenatis lorem risus, vel feugiat neque congue ac. Duis condimentum, turpis ac fringilla placerat, lorem justo faucibus nulla, a ultricies erat sem et lorem.</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" data-role="real-preview-desktop" id="publish-preview-real-desktop-1">
<a class="reload-preview btn btn-sm btn-transparent"><svg type="gl-16-reload"></svg></a>
<div class="frame-holder">
<div class="msg msg-type-warning mb15">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>This post will not be sponsored!</p>
</div>
</div>
<iframe src="../assets/images/samples/real-preview-iframe-desktop.jpg" width="540" height="650" scrolling="no" style="border: none;"></iframe>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="real-preview-mobile" id="publish-preview-real-mobile-1">
<a class="reload-preview btn btn-sm btn-transparent"><svg type="gl-16-reload"></svg></a>
<div class="frame-holder">
<div class="msg msg-type-warning mb15">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>This post will not be sponsored!</p>
</div>
</div>
<iframe src="../assets/images/samples/real-preview-iframe-mobile.jpg" width="540" height="650" scrolling="no" style="border: none;"></iframe>
</div>
</div>
</div>
</div>
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a href="#publish-preview-real-desktop-2" data-toggle="tab">Desktop preview</a>
</li>
<li>
<a href="#publish-preview-real-mobile-2" data-toggle="tab">Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="real-preview-desktop" id="publish-preview-real-desktop-2">
<a class="reload-preview btn btn-sm btn-transparent disabled"><svg type="gl-16-reload"></svg></a>
<div class="sys-block">
<picture class="mb30">
<svg class="sys-size-s sys-col-gray" type="sys-laptop-cross"></svg>
</picture>
<div class="text">
<p>Currently Facebook does not provide real desktop preview of video posts.</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="real-preview-mobile" id="publish-preview-real-mobile-2">
<a class="reload-preview btn btn-sm btn-transparent disabled"><svg type="gl-16-reload"></svg></a>
<div class="sys-block">
<picture class="mb30">
<svg class="sys-size-s sys-col-gray" type="sys-mobile-cross"></svg>
</picture>
<div class="text">
<p>Currently Facebook does not provide real desktop preview of video posts.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a href="#publish-preview-real-desktop-3" data-toggle="tab">Desktop preview</a>
</li>
<li>
<a href="#publish-preview-real-mobile-3" data-toggle="tab">Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="real-preview-desktop" id="publish-preview-real-desktop-3">
<a class="reload-preview btn btn-sm btn-transparent disabled"><svg type="gl-16-reload"></svg></a>
<div class="msg msg-type-error msg-bgr-white mb15">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Oops, something went wrong and we couldn’t load the real desktop preview. Try to reload the preview again.</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="real-preview-mobile" id="publish-preview-real-mobile-3">
<a class="reload-preview btn btn-sm btn-transparent disabled"><svg type="gl-16-reload"></svg></a>
<div class="msg msg-type-error msg-bgr-white mb15">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Oops, something went wrong and we couldn’t load the real mobile preview. Try to reload the preview again.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-module="preview">
<div class="panel-header">
<ul class="nav nav-tabs">
<li class="active">
<a href="#publish-preview-real-desktop-4" data-toggle="tab">Desktop preview</a>
</li>
<li>
<a href="#publish-preview-real-mobile-4" data-toggle="tab">Mobile preview</a>
</li>
</ul>
</div>
<div class="panel-body pattern-grid tab-content">
<div role="tabpanel" class="tab-pane active" data-role="real-preview-desktop" id="publish-preview-real-desktop-4">
<a class="reload-preview btn btn-sm btn-transparent"><svg type="gl-16-reload"></svg></a>
<div class="loader loader-color-white loader-mode-stretched">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<div role="tabpanel" class="tab-pane" data-role="real-preview-mobile" id="publish-preview-real-mobile-4">
<a class="reload-preview btn btn-sm btn-transparent"><svg type="gl-16-reload"></svg></a>
<div class="loader loader-color-white loader-mode-stretched">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
</div>
</div>
| Channel | Status | Channel admins | Actions | |
|---|---|---|---|---|
|
Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans
|
Kalinka Nikiforova |
Reactivate page | ||
|
Komfo_DK
|
Jonas Als, Kalinka Nikiforova |
|||
|
Komfo
|
Mladen Markov |
Reactivate page | ||
|
ECCO Golf
|
Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey |
|
||
|
ECCO Golf
|
Jonas Als, Kalinka Nikiforova |
|||
|
ECCO Golf
|
Mladen Markov |
Reactivate page | ||
|
How will inactive channels be listed in the target selector dropdown and will it be possible to select them?
|
Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey |
<table data-module="reactivate-channels" class="table-basic">
<thead>
<tr>
<th> </th>
<th>Channel</th>
<th>Status</th>
<th>Channel admins</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="social"><svg type="social-16-fb"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Kalinka Nikiforova</p></td>
<td><a class="btn btn-default">Reactivate page</a></td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-tw"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta">Twitter</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Jonas Als, Kalinka Nikiforova</p></td>
<td><span class="meta">Contact channel admins to reactivate page</span></td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-li"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta">LinkedIn</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Mladen Markov</p></td>
<td><a class="btn btn-default">Reactivate page</a></td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-fb"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey</p></td>
<td>
<div class="loader loader-mode-stretched loader-size-small">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-gp"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Google Plus</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Jonas Als, Kalinka Nikiforova</p></td>
<td><span class="meta">Contact channel admins to reactivate page</span></td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-fb"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Mladen Markov</p></td>
<td><a class="btn btn-default">Reactivate page</a></td>
</tr>
<tr>
<td><i class="social"><svg type="social-16-fb"></svg></i></td>
<td>
<div class="card">
<picture class="avatar">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">How will inactive channels be listed in the target selector dropdown and will it be possible to select them?</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="misc-exclamation-mark"></svg></td>
<td><p>Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey</p></td>
<td><span class="meta">Contact channel admins
to reactivate page</span></td>
</tr>
</tbody>
</table>
The structure of an empty wall item container looks like this:
<div class="wall-item">
<!-- content -->
</div>
When an item is loading it will look like this:
<section class="wall-item">
<main>
<div class="loading">
<div class="avatar-placeholder"></div>
<div class="loading-bar"></div>
<div class="loading-bar half separated"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar half"></div>
</div>
</main>
</section>
There are two types of wall items so far: Stream item and Thread item.
Add attribute data-type="stream-item" to the .wall-item container.
Add attribute data-type="thread-item" to the .wall-item container.
The only one supported state so far is focused state.
Note: There's also a mouseover state where a lighter mark line is shown, but that's only for Stream items.
Both Stream items and Thread items can be marked as focused. To do so, add class focused to the .wall-item container.
Note: Only Stream items have a mouseover state where a lighter mark line is shown.
<section class="wall-item">
<main class="focused"></main>
</section>
Both Stream items and Thread items can be marked as dark. To do so, add class dark to the .wall-item container.
<section class="wall-item dark">
<main>
</main>
</section>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-assign-to-colleague">
Assign to colleague
</button>
<div class="modal fade" id="modal-assign-to-colleague" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Assign to colleague</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
<input id="select2-assign-to-colleague" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-default">
<div class="textfield mt10">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type optional note here ..."></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer cf">
<div class="pull-right">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
<a class="btn btn-primary" data-dismiss="modal">Assign</a>
</div>
</div>
</div>
</div>
</div>
function template(data, container) {
return $(
'<span class="main">' + data.text + '</span>' //<svg type="gl-12-cross"></svg>
);
}
$.ajax({
type: 'GET',
dataType: 'json',
url: '../assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-assign-to-colleague').select2({
placeholder: 'Search for colleague...',
data: response.data,
dropdownCssClass: 'single-dropdown modal-dropdown',
templateSelection: template,
templateResult: function(item) {
return $(
'<div class="card">' +
'<picture class="avatar avatar-feature-circle">' +
// item.images.reduce(function (carry, url) {
// return carry + '<img src="' + url + '" ' +
// 'width="32" height="32" alt="' + item.text + '" />';
// }, '') +
'</picture>' +
'<div class="data">' +
'<div class="cell">' +
'<div class="holder">' +
'<span class="name">' + item.text + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
}
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<i class="gl"><svg type="gl-18-magnifier" viewBox="0 0 18 18"><path d="M17.5,15.31l-4.95-4.95a6.52,6.52,0,1,0-2.19,2.19l4.95,4.95ZM3.5,7A3.5,3.5,0,1,1,7,10.5,3.5,3.5,0,0,1,3.5,7Z"/></svg></i>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
The header is a constant box. The main content it holds is information like social network icon, item type and channel name. Here's an example:
<section class="wall-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Dark post</span>
<span class="channel-name">INT: ALL: International Students - Campus Sønderborg - University of Southern Denmark</span>
</div>
</header>
</main>
</section>
In most cases there will be also a button group with some operational buttons in the right corner of the header. The number of the buttons depends on a responsive breakpoint. Here's a simple example:
<section class="wall-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-tw"></svg></i></span>
<span class="item-type">Reply</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
</main>
</section>
The header can be also a parent container for a bell icon representing real time notifications. This is how it looks:
<section class="wall-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-li"></svg></i></span>
<span class="item-type">Post</span>
<span class="channel-name">ECCO Sport</span>
</div>
<div class="rt-notification">
<a class="shape" title="Kalinka Nikiforova assigned this item.">
<svg type="gl-12-bell"></svg>
</a>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
</main>
</section>
Note: The author can be a user as well as a channel.
<section class="wall-item">
<main>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>21 hours ago</span></span>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="author" data-type="channel">
<a class="pic">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">ECCO Sport</span>
<span class="meta meta-group"><span>21 hours ago</span><span>published via Komfo</span></span>
</div>
</article>
</main>
</section>
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
<section class="wall-item">
<main>
<article>
<div class="text">
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until <a>January 3rd</a>.</p>
</div>
</article>
</main>
</section>
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! Does anybody else feel jealous and aroused and worried? I guess if you want children beaten, you have to do it yourself.
<section class="wall-item">
<main>
<article>
<div class="text">
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.</p>
<p>Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! Does anybody else feel jealous and aroused and worried? I guess if you want children beaten, you have to do it yourself.</p>
</div>
</article>
</main>
</section>
Wise thoughts
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
<section class="wall-item">
<main>
<article>
<div class="text">
<p class="title">Wise thoughts</p>
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.</p>
</div>
</article>
</main>
</section>
Great place!
<section class="wall-item">
<main>
<article>
<div class="text">
<p><span class="rating star-3"></span> Great place!</p>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="link-attachment">
<p class="ttl">Sign up for ECCO’s New Market Place</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="attachment meta meta-group"><span><svg type="gl-18-chain"></svg> 5 attached images</span></div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta counters">
<a class="reactions">
<span class="icons">
<i class="react"><svg class="react-size-xs" type="react-like"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-love"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-wow"></svg></i>
</span>
27 reactions
</a>
<a class="comments">53 comments</a>
<a class="likes">156 likes</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta counters">
<a class="reactions">
<span class="icons">
<i class="react"><svg class="react-size-xs" type="react-like"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-love"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-wow"></svg></i>
</span>
27 reactions
</a>
<a class="comments">53 comments</a>
<a class="likes">156 likes</a>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<div class="sys-msg meta">
Mladen assigned this to Kalinka.
</div>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<article>
<div class="media-thumb thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-b footer">
<span>1</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<article>
<div class="media-thumb thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-b footer">
<span>1</span>
<svg type="gl-18-photo"></svg>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<article>
<div class="media-thumb thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-b footer">
<span>1.23K</span>
<svg type="gl-18-photo-album"></svg>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<article>
<div class="media-thumb thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-b footer">
<span>1</span>
<svg type="gl-18-video-camera"></svg>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="tags">
<span class="tag tag-face-light">
<span class="close"></span>
<span class="main">Shoes Campaigns</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Youths Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="main">Youth Fashion Shoes Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Grownups</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Retro Campaign</span>
</span>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<footer>
<div class="data">
<span class="meta user">Kalinka Nikiforova</span>
</div>
</footer>
</main>
</section>
Note: It's not possible to have both counters and insights next to each other in a wall item.
<section class="wall-item" data-type="stream-item">
<main>
<footer>
<div class="data">
<span class="meta meta-group counters">
<span>937 total actions</span>
</span>
</div>
</footer>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<footer>
<div class="data">
<span class="insights meta-group">
<span class="influential"></span>
<span class="engaged"></span>
<span class="sentiment negative"></span>
</span>
</div>
</footer>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<footer>
<div class="data">
<span class="meta meta-group actions">
<a class="link" data-action="user-items">user items</a>
<a class="link" data-action="like">like</a>
<a class="link" data-action="hide">hide</a>
<a class="link" data-action="comment">comment</a>
</span>
</div>
</footer>
</main>
</section>
<section class="wall-item" data-type="stream-item">
<main>
<footer>
<div class="data">
<span class="meta user">Kalinka just started interacting with this page</span>
<span class="insights meta-group">
<span class="influential"></span>
<span class="engaged"></span>
<span class="sentiment positive"></span>
</span>
<span class="meta meta-group actions">
<a class="link" data-action="user-items">user items</a>
<a class="link" data-action="like">like</a>
<a class="link" data-action="hide">hide</a>
<a class="link" data-action="comment">comment</a>
</span>
</div>
</footer>
</main>
</section>
This is very small note, as usually happens.
<section class="wall-item" data-type="stream-item">
<main>
<div class="notes">
<div class="note">
<div class="text">
<p>This is very small note, as usually happens.</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>now</span><span>Mladen wrote to Kalinka</span></div>
</div>
<a class="link more"><svg type="gl-12-text"></svg> 3 more notes</a>
</div>
</main>
</section>
This is very small note, as usually happens.
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
Great!
<section class="wall-item" data-type="stream-item">
<main>
<div class="notes">
<div class="note">
<div class="text">
<p>This is very small note, as usually happens.</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>now</span><span>Mladen wrote to Kalinka</span></div>
</div>
<div class="note">
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>17 minutes ago</span><span>Kalinka wote a note</span><a class="link">delete</a></div>
</div>
<div class="note">
<div class="text">
<p>Great!</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>24 Feb, 14:57</span><span>Marta wrote a note</span></div>
</div>
</div>
</main>
</section>
To be filled...
To be filled...
To be filled...
To be filled...
To be filled...
<section class="wall-item" data-type="stream-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Reply</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta"><span>21 hours ago</span></span>
</div>
<div class="text">
<p>Great product!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">27 reactions</span>
<span class="comments">53 comments</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
</div>
</div>
</article>
<footer>
<div class="data">
<span class="meta user">Kalinka just started interacting with this page</span>
<span class="meta actions"><a class="link" data-action="user-items">user items</a></span>
</div>
<div class="extra">
<a class="faces"><svg type="gl-18-neutral"></svg></a>
</div>
</footer>
</main>
</section>
Wise thoughts
Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel. www.eccos-market.com
This is very small note, as usually happens.
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
Great!
<section class="wall-item dark" data-type="stream-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Dark post</span>
<span class="channel-name">INT: ALL: International Students - Campus Sønderborg - University of Southern Denmark</span>
</div>
<div class="rt-notification">
<a class="shape" title="Kalinka Nikiforova assigned this item.">
<svg type="gl-12-bell"></svg>
</a>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<div class="sys-msg meta">
Mladen assigned this to Kalinka.
</div>
<article>
<div class="media-thumb thumb">
<div class="holder">
<img src="../assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-b footer">
<span>1</span>
<svg type="gl-18-chain"></svg>
</div>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group">
<span>21 hours ago</span>
<span>added 3 new photos to an album</span>
<span>published via Komfo</span>
</span>
</div>
<div class="text">
<p class="title">Wise thoughts</p>
<p>Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel. <a>www.eccos-market.com</a></p>
</div>
<div class="link-attachment">
<p class="ttl">Sign up for ECCO’s New Market Place</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
<div class="feedback">
<div class="meta counters">
<a class="reactions">
<span class="icons">
<i class="react"><svg class="react-size-xs" type="react-like"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-love"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-wow"></svg></i>
</span>
275 reactions
</a>
<a class="comments">9,458 comments</a>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="hide">hide</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<div class="tags">
<span class="tag tag-face-light">
<span class="close"></span>
<span class="main">Shoes Campaigns</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Youths Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="main">Youth Fashion Shoes Campaign</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Grownups</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Retro Campaign</span>
</span>
</div>
</article>
<footer>
<div class="data">
<span class="meta user">Kalinka just started interacting with this page</span>
<span class="insights meta-group">
<span class="influential"></span>
<span class="engaged"></span>
<span class="sentiment positive"></span>
</span>
<!--<span class="meta meta-group counters">-->
<!--<span>937 total actions</span>-->
<!--</span>-->
<span class="meta meta-group actions">
<a class="link" data-action="user-items">user items</a>
<a class="link" data-action="like">like</a>
<a class="link" data-action="hide">hide</a>
<a class="link" data-action="comment">comment</a>
</span>
</div>
<div class="extra">
<span class="item"><svg type="gl-18-eye-striked"></svg></span>
<a class="item"><svg type="gl-18-neutral"></svg></a>
</div>
</footer>
<div class="notes">
<div class="note">
<div class="text">
<p>This is very small note, as usually happens.</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>now</span><span>Mladen wrote to Kalinka</span></div>
</div>
<div class="note">
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>17 minutes ago</span><span>Kalinka wote a note</span><a class="link">delete</a></div>
</div>
<div class="note">
<div class="text">
<p>Great!</p>
</div>
<div class="users">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="meta meta-group"><span>24 Feb, 14:57</span><span>Marta wrote a note</span></div>
</div>
</div>
</main>
</section>
The header is a constant box. The main content it holds is information like social network icon, item type and channel name. Here's an example:
<section class="wall-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Dark post</span>
<span class="channel-name">INT: ALL: International Students - Campus Sønderborg - University of Southern Denmark</span>
</div>
</header>
</main>
</section>
In most cases there will be also a button group with some operational buttons in the right corner of the header. The number of the buttons depends on a responsive breakpoint. Here's a simple example:
<section class="wall-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-tw"></svg></i></span>
<span class="item-type">Reply</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
</main>
</section>
Note: The author can be a user as well as a channel.
<section class="wall-item">
<main>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>21 hours ago</span></span>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="author" data-type="channel">
<a class="pic">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">ECCO Sport</span>
<span class="meta meta-group"><span>21 hours ago</span><span>published via Komfo</span></span>
</div>
</article>
</main>
</section>
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
<section class="wall-item">
<main>
<article>
<div class="text">
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until <a>January 3rd</a>.</p>
</div>
</article>
</main>
</section>
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! Does anybody else feel jealous and aroused and worried? I guess if you want children beaten, you have to do it yourself.
<section class="wall-item">
<main>
<article>
<div class="text">
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.</p>
<p>Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! Does anybody else feel jealous and aroused and worried? I guess if you want children beaten, you have to do it yourself.</p>
</div>
</article>
</main>
</section>
Wise thoughts
A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.
<section class="wall-item">
<main>
<article>
<div class="text">
<p class="title">Wise thoughts</p>
<p>A true inspiration for the children. You are the last hope of the universe. I just want to talk. It has nothing to do with mating. <strong></strong>Fry, that doesn't make sense. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.</p>
</div>
</article>
</main>
</section>
Great place!
<section class="wall-item">
<main>
<article>
<div class="text">
<p><span class="rating star-3"></span> Great place!</p>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="link-attachment">
<p class="ttl">Sign up for ECCO’s New Market Place</p>
<p class="descr">ECCO’s Market is now open downtown! We feature a large selection of organic shoes to help you meet all of your family’s sports needs.</p>
<p class="meta url">www.eccos-market.com</p>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="attachment meta meta-group"><span><svg type="gl-18-chain"></svg> 5 attached images</span></div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta counters">
<a class="reactions">
<span class="icons">
<i class="react"><svg class="react-size-xs" type="react-like"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-love"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-wow"></svg></i>
</span>
27 reactions
</a>
<a class="comments">53 comments</a>
<a class="likes">156 likes</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item">
<main>
<article>
<div class="feedback">
<div class="meta counters">
<a class="reactions">
<span class="icons">
<i class="react"><svg class="react-size-xs" type="react-like"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-love"></svg></i>
<i class="react"><svg class="react-size-xs" type="react-wow"></svg></i>
</span>
27 reactions
</a>
<a class="comments">53 comments</a>
<a class="likes">156 likes</a>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<div class="more">
<a class="link">3 more tweets</a>
</div>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="status">
<svg type="gl-12-eye"></svg>
<svg type="gl-12-zendesk"></svg>
<svg type="gl-12-dollar"></svg>
<svg type="gl-12-positive"></svg>
<svg type="gl-12-user-arrow"></svg>
</div>
</article>
</main>
</section>
Example with small photo:
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="photo">
<img src="../assets/images/samples/30x30.jpg" width="30" height="30">
</div>
</article>
</main>
</section>
Example with big landscape photo:
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="photo">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500">
</div>
</article>
</main>
</section>
Example with big portrait photo:
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="photo">
<img src="../assets/images/samples/800x2400.jpg" width="800" height="2400">
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="photo-album">
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/30x30.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/96x96.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/100x300.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/490x490.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/600x1200.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/800x2400.jpg">
</div>
</div>
<div class="thumb thumb-size-120">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg">
</div>
</div>
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="video">
<div class="icon">
<svg type="gl-18-video-camera"></svg>
</div>
<img src="../assets/images/samples/shoes-above.jpg" width="750" height="500">
</div>
</article>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<article>
<div class="media" data-type="link">
<div class="overview scroll-x">
<img src="../assets/images/samples/30x30.jpg">
<img src="../assets/images/samples/96x96.jpg">
<img src="../assets/images/samples/100x300.jpg">
<img src="../assets/images/samples/490x490.jpg">
<img src="../assets/images/samples/600x1200.jpg">
<img src="../assets/images/samples/800x2400.jpg">
<img src="../assets/images/samples/1500x500.jpg">
</div>
</div>
</article>
</main>
</section>
Birthday Party
Come and have some joy with us.
<section class="wall-item" data-type="thread-item">
<main>
<div class="event-block">
<article>
<div class="author" data-type="channel">
<a class="pic">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO Sport">
</picture>
</a>
<span class="name">ECCO Sport</span>
<span class="meta meta-group"><span>now</span><span>created event <a class="link">Birthday Party</a></span><span>15 are going</span></span>
</div>
<div class="text">
<p class="title">Birthday Party</p>
<p>Come and have some joy with us.</p>
</div>
</article>
<div class="thumb cover">
<div class="holder">
<img src="../assets/images/samples/1000x819.jpg">
</div>
<div class="data">
<label>
<svg type="gl-16-calendar"></svg>
<span>30 Nov, 14:00, at Mall of Sofia</span>
</label>
</div>
</div>
</div>
</main>
</section>
<section class="wall-item" data-type="thread-item">
<main>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
</section>
<section class="wall-item selected" data-type="thread-item">
<div class="comment-chain">
<div class="more">
<a class="link">3 more comments</a>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
</div>
<div class="text">
<p>This is very small comment, as usually happens.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Super oplæg!</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="edit">edit</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="more">
<a class="link">2 more replies</a>
</div>
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="channel">
<a class="pic">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO Sport">
</picture>
</a>
<span class="name">ECCO Sport</span>
</div>
<div class="text">
<p>Cool comment!</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="edit">edit</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jonas Als">
</picture>
</a>
<span class="name">Jonas Als</span>
</div>
<div class="text">
<p>This is very small comment, as usually happens.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
<div class="more">
<a class="link">5 more comments</a>
</div>
</div>
</section>
<section class="wall-item" data-type="thread-item">
<form action="" class="comment-form">
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="comment-form-upload-input">
<label for="comment-form-upload-input" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
Basic state of the comment form:
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="comment-form-workflow-input-1">
<label for="comment-form-workflow-input-1" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When start writing, a lock info appears and the Post button becomes active.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ...">Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="comment-form-workflow-input-2">
<label for="comment-form-workflow-input-2" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary">Post</button>
</div>
</div>
</form>
</section>
When start uploading an attachment, a loader appears, the camera button turns into X button and the Post button becomes disabled again.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ...">Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
<div class="loader loader-color-white">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-default">
<svg type="gl-18-cross"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When an upload fails, an error message appears, the the X button becomes a Trash button and the Post button becomes active.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ...">Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
<div class="error" title="Use only (jpg, gif, png) files. Use photos less than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-default">
<svg type="gl-18-trash"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary">Post</button>
</div>
</div>
</form>
</section>
When an image upload is done, the result appears, the X button becomes a Trash button and the Post button becomes active.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ...">Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500">
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-default">
<svg type="gl-18-trash"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary">Post</button>
</div>
</div>
</form>
</section>
When an attachment upload is done, the result appears, the X button becomes a Trash button and the Post button becomes active.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ...">Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
<div class="file">
<svg type="gl-18-chain"></svg><span>Very-long-named-file-with-numbers-01234567890123456789-0123456789-01234567890123456789-0123456789-01234567890123456789-0123456789-01234567890123456789-0123456789.pdf</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-default">
<svg type="gl-18-trash"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary">Post</button>
</div>
</div>
</form>
</section>
Basic state of the inline comment form when start replying:
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a reply ..."></textarea>
<div class="textfield-addon">
<input type="file" id="replying-workflow-input-1">
<label for="replying-workflow-input-1" class="btn btn-transparent">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary disabled">
Post
</a>
</div>
</div>
<div class="locked mt10">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</form>
</article>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="replying-workflow-input-2">
<label for="replying-workflow-input-2" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When start writing, the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a reply ...">Cool comment</textarea>
<div class="textfield-addon">
<input type="file" id="replying-workflow-input-3">
<label for="replying-workflow-input-3" class="btn btn-transparent">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="locked mt10">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</form>
</article>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="replying-workflow-input-4">
<label for="replying-workflow-input-4" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When start uploading an attachment, a placeholder with a loader appears, the camera button disappears and the Post button becomes disabled again.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a reply ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<div class="loader loader-mode-stretched loader-color-white">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-cross"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary disabled">
Post
</a>
</div>
</div>
<div class="locked mt10">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</form>
</article>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="replying-workflow-input-5">
<label for="replying-workflow-input-5" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When an upload fails, an error message appears, the the X button becomes a Trash button and the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a reply ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<div class="error" title="Use only (jpg, gif, png) files. Use photos less than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-trash"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="locked mt10">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</form>
</article>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="replying-workflow-input-5">
<label for="replying-workflow-input-5" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When an image upload is done, the result appears, the X button becomes a Trash button and the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a reply ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500">
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-trash"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="locked mt10">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</form>
</article>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="replying-workflow-input-5">
<label for="replying-workflow-input-5" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
Basic state of the inline comment form when start replying:
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a text ..."></textarea>
<div class="textfield-addon">
<input type="file" id="editing-workflow-input-1">
<label for="editing-workflow-input-1" class="btn btn-transparent">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary disabled">
Post
</a>
</div>
</div>
<div class="meta meta-group mt10">
<span class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</span>
<span>Press ESC to cancel</span>
</div>
</form>
</article>
</div>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="editing-workflow-input-2">
<label for="editing-workflow-input-2" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When start writing, the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a text ...">Cool comment</textarea>
<div class="textfield-addon">
<input type="file" id="editing-workflow-input-3">
<label for="editing-workflow-input-3" class="btn btn-transparent">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="meta meta-group mt10">
<span class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</span>
<span>Press ESC to cancel</span>
</div>
</form>
</article>
</div>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="editing-workflow-input-4">
<label for="editing-workflow-input-4" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When start uploading an attachment, a placeholder with a loader appears, the camera button disappears and the Post button becomes disabled again.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a text ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<div class="loader loader-mode-stretched loader-color-white">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-cross"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary disabled">
Post
</a>
</div>
</div>
<div class="meta meta-group mt10">
<span class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</span>
<span>Press ESC to cancel</span>
</div>
</form>
</article>
</div>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="editing-workflow-input-5">
<label for="editing-workflow-input-5" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When an upload fails, an error message appears, the the X button becomes a Trash button and the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a text ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<div class="error" title="Use only (jpg, gif, png) files. Use photos less than 16 MB.">
<span>Upload failed</span>
</div>
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-trash"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="meta meta-group mt10">
<span class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</span>
<span>Press ESC to cancel</span>
</div>
</form>
</article>
</div>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="editing-workflow-input-5">
<label for="editing-workflow-input-5" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
When an image upload is done, the result appears, the X button becomes a Trash button and the Post button becomes active.
Great page!
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p><span class="rating star-3"></span> Great page!</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">7 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<footer>
<div class="post-insights">
<a class="link icon-link"><svg type="gl-16-chart-bars"></svg> post insights</a>
</div>
</footer>
</main>
<div class="comment-chain">
<div class="comment">
<article class="focused">
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<form action="" class="inline-comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea rows="1" class="textfield-input" placeholder="Write a text ...">Cool comment</textarea>
<div class="thumb">
<div class="holder">
<img src="../assets/images/samples/1500x500.jpg" width="1500" height="500">
</div>
<div class="addon-br">
<input type="file">
<label class="btn btn-sm btn-default">
<svg type="gl-16-trash"></svg>
</label>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">
Post
</a>
</div>
</div>
<div class="meta meta-group mt10">
<span class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</span>
<span>Press ESC to cancel</span>
</div>
</form>
</article>
</div>
</div>
</div>
<form action="" class="comment-form">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="editing-workflow-input-6">
<label for="editing-workflow-input-6" class="btn btn-default">
<svg type="gl-18-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
@Komfo Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.
<section class="wall-item" data-type="thread-item">
<main>
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-tw"></svg></i></span>
<span class="item-type">Twitter Conversation</span>
<span class="channel-name">@Komfo</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova <span>@kiki1313</span></span>
<span class="meta meta-group"><span>Retweeted by Roza Tsvetkova</span></span>
</div>
<div class="text">
<p><a class="link">@Komfo</a> Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="time">now</span>
<span class="reactions">27 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="retweet">retweet</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</main>
</section>
Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
This is very small comment, as usually happens.
This is very small comment, as usually happens.
<section class="wall-item" data-type="thread-item">
<main class="focused">
<header>
<div class="data">
<span class="network-icon"><i class="social"><svg type="social-16-fb"></svg></i></span>
<span class="item-type">Post Thread</span>
<span class="channel-name">Komfo DK</span>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-user-plus"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-text"></svg></a>
<hr>
<a class="btn btn-transparent"><svg type="gl-18-dots"></svg></a>
</div>
</header>
<article>
<div class="status">
<svg type="gl-12-eye"></svg>
<svg type="gl-12-zendesk"></svg>
<svg type="gl-12-positive"></svg>
<svg type="gl-12-user-arrow"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
<span class="meta meta-group"><span>now</span></span>
</div>
<div class="text">
<p>Always assume the words you speak are being spoken to you, and then ask yourself, how does this make me feel, happy or something else or whatever you want to be something else.</p>
</div>
<div class="feedback">
<div class="meta counters">
<span class="reactions">27 reactions</span>
<span class="comments">5 comments</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="comment">comment</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</main>
<div class="comment-chain">
<div class="more">
<a class="link">3 more comments</a>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">21 Feb, 21:24</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-eye"></svg>
<svg type="gl-12-zendesk"></svg>
<svg type="gl-12-dollar"></svg>
<svg type="gl-12-positive"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</a>
<span class="name">Kalinka Nikiforova</span>
</div>
<div class="text">
<p>This is very small comment, as usually happens.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="replies">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Louise Bakbøl Lownsbrough">
</picture>
</a>
<span class="name">Louise Bakbøl Lownsbrough</span>
</div>
<div class="text">
<p>Super oplæg!</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="edit">edit</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
<div class="more">
<a class="link">2 more replies</a>
</div>
<article>
<div class="status">
<svg type="gl-12-zendesk"></svg>
<svg type="gl-12-dollar"></svg>
<svg type="gl-12-positive"></svg>
<svg type="gl-12-user-arrow"></svg>
</div>
<div class="author" data-type="channel">
<a class="pic">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO Sport">
</picture>
</a>
<span class="name">ECCO Sport</span>
</div>
<div class="text">
<p>Cool comment!</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">1 like</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="edit">edit</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
</div>
<div class="comment">
<article>
<div class="status">
<svg type="gl-12-user-plus"></svg>
</div>
<div class="author" data-type="user">
<a class="pic">
<picture class="avatar avatar-feature-circle avatar-size-big">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jonas Als">
</picture>
</a>
<span class="name">Jonas Als</span>
</div>
<div class="text">
<p>This is very small comment, as usually happens.</p>
</div>
<div class="feedback">
<div class="meta counters">
<div class="time">now</div>
<span class="likes">0 likes</span>
</div>
<div class="meta actions">
<a class="link" data-action="like">like</a>
<a class="link" data-action="reply">reply</a>
<a class="link" data-action="message">message</a>
<a class="link" data-action="delete">delete</a>
</div>
</div>
</article>
</div>
<div class="more">
<a class="link">5 more comments</a>
</div>
</div>
<form action="" class="comment-form">
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder">
</div>
<div class="addon-br">
<input type="file" id="comment-form-upload-input-2">
<label for="comment-form-upload-input-2" class="btn btn-default">
<svg type="gl-16-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
</section>
Smart thoughts. Always assume the words you speak are being spoken to you, and then ask yourself.
This is very small comment, as usually happens.
Super oplæg!
Cool comment!
This is very small comment, as usually happens.