We are working on something new! Check it out here!

Comment form

Standard WordPress comment form, ignore the markup please use the comment_form() WP function to show comment form

Example

Kommentera

Inloggad som Random hero. Logga ut?

<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Kommentera
<small><a rel="nofollow" id="cancel-comment-reply-link" href="/nyheter/nya-klarspraksseminarier-den-20-22-november/comment-page-1/#respond" style="display:none;">Avbryt svar</a></small></h3>          <form action="#" method="post" id="commentform" class="comment-form">
<p class="logged-in-as"><a href="#" aria-label="Inloggad som Random hero. Redigera din profil.">Inloggad som Random hero</a>. <a href="#">Logga ut?</a></p><div class="fake-hide"><input name="931dc17c3e18362_fi" type="text" value="445bbe0145edb56" size="30"></div><div class="fake-hide"><input class="hidden" name="931dc17c3e18362_bl" type="text" size="30"></div><p class="comment-form-comment"><label for="comment">Kommentar</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Skicka kommentar"> <input type="hidden" name="comment_post_ID" value="7662" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p><input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="bfc33d1b01"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
<style>.fake-hide {width: 1px; height: 1px; opacity: 0.0001; position: absolute; overflow: hidden;}</style><div class="fake-hide"><img src="#"></div>           </form>
</div>
Source file: ~/source/sass/components/blog/_comments-form.scss

Comments

List of comments

Example

  • Random hero

    Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

    • Random hero 2

      Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

    • Random hero 3

      Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

  • Random hero

    Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

    • Random hero 2

      Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

    • Random hero 3

      Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.

<div class="comments-wrapper">
    <ul class="comments" id="comments">
        <li class="comment" id="comment-9999">
            <div class="author-image">
                <a href="#"><img src="https:unsplash.it/200/200?image=1005"></a>
            </div>
            <div class="comment-body">
                <div class="comment-header">
                    <em class="author-name"><a href="#">Random hero</a></em>
                    <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                </div>
                <div class="comment-content">
                    <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                </div>
                <div class="comment-footer">
                    <span class="like">
                        <a class="like-button" href="#" data-comment-id="9999"><span id="like-count">0</span></a>
                    </span>
                    <span class="reply">
                        <a class="comment-reply-link" href="#">Svara</a>
                    </span>
                </div>
            </div>
            <ul class="answers">
                <li class="answer" id="answer-9999">
                    <div class="author-image">
                        <a href="#"><img src="https:unsplash.it/200/200?image=1005"></a>
                    </div>
                    <div class="comment-body">
                        <div class="comment-header">
                            <em class="author-name"><a href="#">Random hero 2</a></em>
                            <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                        </div>
                        <div class="comment-content">
                            <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                        </div>
                        <div class="comment-footer">
                            <span class="like">
                                <a class="like-button" href="#" data-comment-id="9999"><span id="like-count">0</span></a>
                            </span>
                            <span class="reply">
                                <a class="comment-reply-link" href="#">Svara</a>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="answer" id="answer-9999">
                    <div class="author-image">
                         <a href="#"><img src="https:unsplash.it/200/200?image=1005"></a>
                    </div>
                    <div class="comment-body">
                        <div class="comment-header">
                            <em class="author-name"><a href="#">Random hero 3</a></em>
                            <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                        </div>
                        <div class="comment-content">
                            <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                        </div>
                        <div class="comment-footer">
                            <span class="like">
                                <a class="like-button active" href="#" data-comment-id="9999"><span id="like-count">11</span></a>
                            </span>
                            <span class="reply">
                                <a class="comment-reply-link" href="#">Svara</a>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <li class="comment" id="comment-9999">
            <div class="author-image">
                <a href="#"><i class="pricon pricon-2x pricon-user-o"></i></a>
            </div>
            <div class="comment-body">
                <div class="comment-header">
                    <em class="author-name"><a href="#">Random hero</a></em>
                    <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                </div>
                <div class="comment-content">
                    <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                </div>
                <div class="comment-footer">
                    <span class="like">
                        <a class="like-button active" href="#" data-comment-id="9999"><span id="like-count">11</span></a>
                    </span>
                    <span class="reply">
                        <a class="comment-reply-link" href="#">Svara</a>
                    </span>
                </div>
            </div>
            <ul class="answers">
                <li class="answer" id="answer-9999">
                    <div class="author-image">
                        <a href="#"><i class="pricon pricon-2x pricon-user-o"></i></a>
                    </div>
                    <div class="comment-body">
                        <div class="comment-header">
                            <em class="author-name"><a href="#">Random hero 2</a></em>
                            <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                        </div>
                        <div class="comment-content">
                            <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                        </div>
                        <div class="comment-footer">
                            <span class="like">
                                <a class="like-button" href="#" data-comment-id="9999"><span id="like-count">0</span></a>
                            </span>
                            <span class="reply">
                                <a class="comment-reply-link" href="#">Svara</a>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="answer" id="answer-9999">
                    <div class="author-image">
                        <a href="#"><i class="pricon pricon-2x pricon-user-o"></i></a>
                    </div>
                    <div class="comment-body">
                        <div class="comment-header">
                            <em class="author-name"><a href="#">Random hero 3</a></em>
                            <time data-tooltip="2017-08-22 kl. 08:36" data-tooltip-right datetime="2017-08-22 06:36:28">20 minuter sedan</time>
                        </div>
                        <div class="comment-content">
                            <p>Lorem ipsum curabitur donec tempor nullam senectus curabitur taciti quis eget ultrices varius lacinia purus sodales pulvinar, ornare himenaeos per feugiat lacus sagittis venenatis interdum, amet ultricies sodales maecenas nostra porta.</p>
                        </div>
                        <div class="comment-footer">
                            <span class="like">
                                <a class="like-button active" href="#" data-comment-id="9999"><span id="like-count">11</span></a>
                            </span>
                            <span class="reply">
                                <a class="comment-reply-link" href="#">Svara</a>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
Source file: ~/source/sass/components/blog/_comments.scss

Post

A simple blog post

Modifiers

  • .post-full - Shows the full post
  • .post-collapsed - Collapsed post (faded out content)
  • .post-compressed - Minimal post
  • .post-single - Single post

Example

Candy tootsie roll cookie

Dessert dessert I love powder sweet fruitcake soufflé bonbon. I love jelly beans carrot cake chupa chups lemon drops croissant lemon drops. I love cheesecake brownie oat cake topping candy canes caramels. Lemon drops bonbon gingerbread pastry I love dessert jujubes caramels ice cream. Topping sugar plum cookie tiramisu I love I love powder. Tiramisu bear claw candy cotton candy croissant macaroon bear claw. Chocolate bar cupcake halvah gummi bears I love.

Sesame snaps bonbon fruitcake dragée pastry. Caramels icing cake lollipop donut liquorice. Sweet roll pudding gingerbread apple pie cheesecake I love caramels chocolate bar. Cheesecake apple pie muffin cake toffee lemon drops apple pie. Danish oat cake pastry sugar plum jelly chocolate bar pastry pudding. Sesame snaps jujubes soufflé liquorice cake.

Published: 2016-01-01
Share
<div class="post post-collapsed">
    <header class="post-header">
        <h1>Candy tootsie roll cookie</h1>
        <ul>
            <li class="post-author">
                <span style="background-image:url('https://unsplash.it/200/300?image=1005');" class="post-author-image"><img alt="Baker Bakersson" src="https://unsplash.it/200/300?image=1005"></span>
                <span class="post-author-name">Baker</span>
            </li>
            <li class="post-date">
                <time>19 february, 2016 10:46</time>
            </li>
            <li class="post-comments">
                <a href="#">Comments (0)</a>
            </li>
        </ul>
    </header>
    <article>
        <p>Dessert dessert I love powder sweet fruitcake soufflé bonbon. I love jelly beans carrot cake chupa chups lemon drops croissant lemon drops. I love cheesecake brownie oat cake topping candy canes caramels. Lemon drops bonbon gingerbread pastry I love dessert jujubes caramels ice cream. Topping sugar plum cookie tiramisu I love I love powder. Tiramisu bear claw candy cotton candy croissant macaroon bear claw. Chocolate bar cupcake halvah gummi bears I love.</p>
        <p>Sesame snaps bonbon fruitcake dragée pastry. Caramels icing cake lollipop donut liquorice. Sweet roll pudding gingerbread apple pie cheesecake I love caramels chocolate bar. Cheesecake apple pie muffin cake toffee lemon drops apple pie. Danish oat cake pastry sugar plum jelly chocolate bar pastry pudding. Sesame snaps jujubes soufflé liquorice cake.</p>
    </article>
    <footer class="grid-table">
        <div class="grid-md-6"><strong>Published:</strong> 2016-01-01</div>
        <div class="grid-md-6 text-right">Share</div>
    </footer>
</div>
Source file: ~/source/sass/components/blog/_post.scss