Desktop design

Active states

Modal design

Mobile design

Interactive comments section

<app-root _nghost-wwa-c17="" ng-version="14.2.4">

=`14.2.4`><div _ngcontent-wwa-c17=`` class=`container`><secti

ontainer`><section _ngcontent-wwa-c17=`` class=`container__comments`><app-c

ns-c16-0`><h1 _ngcontent-wwa-c16=`` class=`ng-tns-c16-0`>Angula

List</h1><ul _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-trigger ng-trigger-listAnimation`><!----

n`><li _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-star-inserted ng-animating` style=``><app-c

wa-c15=``><section _ngcontent-wwa-c15=`` clickoutside=``><div _

utside=``><div _ngcontent-wwa-c15=`` class=`container`><div _

ontainer`><div _ngcontent-wwa-c15=`` class=`votes-container`><div _

ontainer`><div _ngcontent-wwa-c15=`` class=`votes`><butto

s=`votes`><button _ngcontent-wwa-c15=`` class=`btn__simple vote`>+</but

+</button><div _ngcontent-wwa-c15=`` class=`points`>12</di

`>12</div><button _ngcontent-wwa-c15=`` class=`btn__simple vote`>-</but

div></div><div _ngcontent-wwa-c15=`` class=`comment`><div _

`comment`><div _ngcontent-wwa-c15=`` class=`comment-header`><div _

t-header`><div _ngcontent-wwa-c15=`` class=`user-header`><img _

r-header`><img _ngcontent-wwa-c15=`` alt=`user image` src=`/assets/interactive-comments-section-main/images/avatars/image-amyrobson.png` width=`35` height=`35`><h5 _n

ight=`35`><h5 _ngcontent-wwa-c15=``>amyrob

obson</h5><span _ngcontent-wwa-c15=`` class=`light-date`> 1 mon

pan></div><button _ngcontent-wwa-c15=`` class=`btn btn__simple`><img _

__simple`><img _ngcontent-wwa-c15=`` src=`assets/interactive-comments-section-main/images/icon-reply.svg` alt=``> Reply

ton></div><div _ngcontent-wwa-c15=`` class=`content-comment`> Impre

----></li><li _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-star-inserted ng-animating` style=``><app-c

+</button><div _ngcontent-wwa-c15=`` class=`points`>5</div

s`>5</div><button _ngcontent-wwa-c15=`` class=`btn__simple vote`>-</but

r-header`><img _ngcontent-wwa-c15=`` alt=`user image` src=`/assets/interactive-comments-section-main/images/avatars/image-maxblagun.png` width=`35` height=`35`><h5 _n

ight=`35`><h5 _ngcontent-wwa-c15=``>maxbla

lagun</h5><span _ngcontent-wwa-c15=`` class=`light-date`> 2 wee

ton></div><div _ngcontent-wwa-c15=`` class=`content-comment`> Woah,

ment-card><ul _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-star-inserted`><li _n

inserted`><li _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-star-inserted`><app-c

+</button><div _ngcontent-wwa-c15=`` class=`points`>4</div

s`>4</div><button _ngcontent-wwa-c15=`` class=`btn__simple vote`>-</but

r-header`><img _ngcontent-wwa-c15=`` alt=`user image` src=`/assets/interactive-comments-section-main/images/avatars/image-ramsesmiron.png` width=`35` height=`35`><h5 _n

ight=`35`><h5 _ngcontent-wwa-c15=``>ramses

miron</h5><span _ngcontent-wwa-c15=`` class=`light-date`> 1 wee

ton></div><div _ngcontent-wwa-c15=`` class=`content-comment`> If yo

----></li><li _ngcontent-wwa-c16=`` class=`ng-tns-c16-0 ng-star-inserted`><app-c

+</button><div _ngcontent-wwa-c15=`` class=`points`>2</div

s`>2</div><button _ngcontent-wwa-c15=`` class=`btn__simple vote`>-</but

r-header`><img _ngcontent-wwa-c15=`` alt=`user image` src=`/assets/interactive-comments-section-main/images/avatars/image-juliusomo.png` width=`35` height=`35`><h5 _n

ight=`35`><h5 _ngcontent-wwa-c15=``>julius

usomo</h5><span _ngcontent-wwa-c15=`` class=`light-date`> 2 day

ton></div><div _ngcontent-wwa-c15=`` class=`content-comment`> I cou

Please log in to post a comment

Community feedback

Comments challenge using Angular

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community