Desktop design

Active states

Modal design

Mobile design

Interactive comments section

`11.2.14`><main _ngcontent-khb-c46=`` class=`container`><h1 _n

ontainer`><h1 _ngcontent-khb-c46=`` class=`sr-only`> Inter

hb-c45=``><div _ngcontent-khb-c45=`` class=`comments`><app-c

Object]`><div _ngcontent-khb-c44=`` class=`card bg-white d-flex`><div _

e d-flex`><div _ngcontent-khb-c44=`` class=`card__vote`><app-v

Object]`><div _ngcontent-khb-c42=`` class=`btn__votes bg-very-light-gray`><a _ng

ght-gray`><a _ngcontent-khb-c42=`` class=`upvote text-light-grayish-blue`><i _ng

ish-blue`><i _ngcontent-khb-c42=`` class=`fa-solid fa-plus`></i></

`></i></a><p _ngcontent-khb-c42=`` class=`text-blue fw-500`>12</p>

00`>12</p><a _ngcontent-khb-c42=`` class=`downvote text-light-grayish-blue`><i _ng

ish-blue`><i _ngcontent-khb-c42=`` class=`fa-solid fa-minus`></i></

ton></div><div _ngcontent-khb-c44=`` class=`card__content`><div _

_content`><div _ngcontent-khb-c44=`` class=`card__header d-flex`><div _

r d-flex`><div _ngcontent-khb-c44=`` class=`card__image`><img _

d__image`><img _ngcontent-khb-c44=`` alt=`comment.user.username` src=`./assets/images/avatars/image-amyrobson.png`></div>

ng`></div><p _ngcontent-khb-c44=`` class=`card__name text-dark-blue fw-500`> amyro

alse` }--><p _ngcontent-khb-c44=``>1 mont

</p></div><div _ngcontent-khb-c44=`` class=`card__buttons`><a _ng

_buttons`><a _ngcontent-khb-c44=`` class=`btn-reply text-blue fw-500`><i _ng

e fw-500`><i _ngcontent-khb-c44=`` class=`fa-solid fa-reply`></i><s

eply`></i><span _ngcontent-khb-c44=``>Reply<

ntainer--><p _ngcontent-khb-c44=`` class=`card__text`><!--bi

}--></div><div _ngcontent-khb-c45=`` class=`comments`><app-c

`></i></a><p _ngcontent-khb-c42=`` class=`text-blue fw-500`>5</p><

500`>5</p><a _ngcontent-khb-c42=`` class=`downvote text-light-grayish-blue`><i _ng

d__image`><img _ngcontent-khb-c44=`` alt=`comment.user.username` src=`./assets/images/avatars/image-maxblagun.png`></div>

ng`></div><p _ngcontent-khb-c44=`` class=`card__name text-dark-blue fw-500`> maxbl

alse` }--><p _ngcontent-khb-c44=``>2 week

/app-card><div _ngcontent-khb-c45=`` class=`replies`><div _

`replies`><div _ngcontent-khb-c45=``><app-c

`></i></a><p _ngcontent-khb-c42=`` class=`text-blue fw-500`>4</p><

500`>4</p><a _ngcontent-khb-c42=`` class=`downvote text-light-grayish-blue`><i _ng

d__image`><img _ngcontent-khb-c44=`` alt=`comment.user.username` src=`./assets/images/avatars/image-ramsesmiron.png`></div>

ng`></div><p _ngcontent-khb-c44=`` class=`card__name text-dark-blue fw-500`> ramse

alse` }--><p _ngcontent-khb-c44=``>1 week

ntainer--><p _ngcontent-khb-c44=`` class=`card__text`><span

rd__text`><span _ngcontent-khb-c44=`` class=`text-blue fw-500`>@maxbl

ard></div><div _ngcontent-khb-c45=``><app-c

`></i></a><p _ngcontent-khb-c42=`` class=`text-blue fw-500`>2</p><

500`>2</p><a _ngcontent-khb-c42=`` class=`downvote text-light-grayish-blue`><i _ng

d__image`><img _ngcontent-khb-c44=`` alt=`comment.user.username` src=`./assets/images/avatars/image-juliusomo.png`></div>

ng`></div><p _ngcontent-khb-c44=`` class=`card__name text-dark-blue fw-500`> juliu

usomo </p><p _ngcontent-khb-c44=`` class=`bg-blue text-white you`>you</p

true` }--><p _ngcontent-khb-c44=``>2 days

</p></div><div _ngcontent-khb-c44=`` class=`card__buttons`><div _

_buttons`><div _ngcontent-khb-c44=`` class=`btn-edit-delete`><a _ng

t-delete`><a _ngcontent-khb-c44=`` class=`btn-delete text-soft-red fw-500`><i _ng

d fw-500`><i _ngcontent-khb-c44=`` class=`fa-solid fa-trash`></i> D

Delete</a><a _ngcontent-khb-c44=`` class=`btn-edit text-blue fw-500`><i _ng

e fw-500`><i _ngcontent-khb-c44=`` class=`fa-solid fa-pen`></i> E

rd__text`><span _ngcontent-khb-c44=`` class=`text-blue fw-500`>@ramse

Object]`><div _ngcontent-khb-c41=`` class=`reply d-grid bg-white`><div _

bg-white`><div _ngcontent-khb-c41=`` class=`reply__image`><img _

y__image`><img _ngcontent-khb-c41=`` src=`./assets/images/avatars/image-juliusomo.png` alt=`juliusomo`></div>

mo`></div><div _ngcontent-khb-c41=`` class=`reply__form`><texta

ly__form`><textarea _ngcontent-khb-c41=`` name=`reply` id=`reply` cols=`30` rows=`10` class=`text-area text-grayish-blue ff-rubik ng-untouched ng-pristine ng-valid` ng-reflect-name=`reply` placeholder=`Add a comment...`></text

rea></div><div _ngcontent-khb-c41=`` class=`reply__btn`><butto

ply__btn`><button _ngcontent-khb-c41=`` class=`btn bg-blue`>Send</

/script>  <modal _ngcontent-khb-c45=`` id=`modal-1` ng-reflect-id=`modal-1`><div c

Please log in to post a comment

Community feedback

Interactive Comment Section using Angular

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community