KXB.Spark

.NET frontend modules

Installation

PM> Install-Package KXB.Spark.ArticleList -Version 0.1.1

KXB.Spark.ArticleList on NuGet.org

Preview

4 articles side by side

ridens

interesset ea sed

aeterno in

inciderint Inermis, senserit vim at Vide mutat persius mel. ne ut quo diam oratio eirmod Ea nam enim singulis hendrerit qui no purto euripidis Usu eius iudicabit te Vim augue vitae appareat te Dictas, dicunt aeterno in. ius docendi

Has

essent appareat

munere per

vel modo nemore, Ut vide ridens, vim quis, dolore ad vix Ut usu, nullam. audire contentiones mel facilisis vituperatoribus ne Duo id dictas fuisset principes usu scaevola incorrupte at Sit in facete efficiendi. Graeco, assentior et. per veritus interesset. ea sed

cum

regione dissentiet ad

mel ne

vidit temporibus at Doctus, eruditi ea has tale dicant. eleifend. at eos, Lucilius nominati eu. est, has. ei odio. meis mollis cum cu

pri

facete efficiendi Graeco

nibh choro

senserit, vim, at Vide mutat persius mel ne ut quo diam, oratio, eirmod Ea nam enim, singulis hendrerit, qui no

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "interesset ea sed",
      "Subtitle": "aeterno in",
      "Label": "ridens",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "id cotidieque definitiones Mucius",
        "Title": "hendrerit",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "essent appareat",
      "Subtitle": "munere per",
      "Label": "Has",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "paulo prodesset persecuti",
        "Title": "nibh",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "regione dissentiet ad",
      "Subtitle": "mel ne",
      "Label": "cum",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "mediocrem salutatus",
        "Title": "Sit ut",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "facete efficiendi Graeco",
      "Subtitle": "nibh choro",
      "Label": "pri",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "cum ea",
        "Title": "ipsum dolor sit",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    }
  ],
  "ArticleListRenderMode": 3,
  "NumberOfArticlesPerRow": 0
}

Preview

4 articles side by side with links

vitae

nam ut eos

ea Agam

vocent veritus utinam possit ea vis Has ut, nibh choro doming Dicta legere nec eu Mutat malorum contentiones cum ea vix vidit temporibus at Doctus eruditi ea has tale, dicant, eleifend at eos Lucilius, nominati eu est has

sea

eum ad enim

liber singulis instructior

ea simul. denique convenire qui ad Deterruisset, consectetuer vis, ad in, mediocrem salutatus sit Cu eum ignota oportere euripidis te vidit, possim qui vim. tamquam postulant te Id paulo. prodesset persecuti quo atqui facilisis te nec Usu ne liber, singulis instructior

per quo

modo nemore

nam, enim. singulis hendrerit qui no purto euripidis Usu eius iudicabit te Vim, augue vitae appareat te Dictas dicunt aeterno in ius docendi nominavi eu sit qui at

fuisset

dolore ad vix

suscipiantur vis no

comprehensam. eos ea cu case regione vel Mel alii graeci prompta, no posse primis. platonem in pri et vel modo nemore Ut vide ridens vim quis dolore ad. vix. Ut usu nullam audire contentiones mel facilisis vituperatoribus ne Duo id, dictas

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "nam ut eos",
      "Subtitle": "ea Agam",
      "Label": "vitae",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "cu Ea eum",
        "Title": "semper facete",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "eum ad enim",
      "Subtitle": "liber singulis instructior",
      "Label": "sea",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "repudiandae vituperatoribus",
        "Title": "vix an In",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "per quo",
      "Subtitle": "modo nemore",
      "Label": "no",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "mazim indoctum ei",
        "Title": "sale",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    },
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "dolore ad vix",
      "Subtitle": "suscipiantur vis no",
      "Label": "fuisset",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "alii graeci prompta no",
        "Title": "sonet",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    }
  ],
  "ArticleListRenderMode": 3,
  "NumberOfArticlesPerRow": 0
}

Preview

3 articles side by side

Vide

eros fabulas

ea vis Has

nominavi eu sit qui at senserit. intellegam Ius at case reformidans Ea tritani offendit per, quo, ad veri paulo Id, his tale sint Veritus vivendo. menandri nam ut. eos debet recteque te Deleniti apeirian, duo te, quod. mundi

offendit

ei odio meis

Deterruisset consectetuer

nemore reque animal scriptorem ad his. vim et. audiam. fierent mentitum, Mundi timeam probatus. quo ea Agam sapientem suscipiantur vis no at mazim dissentias his, vel essent prodesset ne Id usu sumo audire vivendum Sit ut lorem, persius. No, eros fabulas theophrastus. eam et,

usu scaevola

amet pri an

qui ad Deterruisset consectetuer. vis ad in mediocrem, salutatus sit Cu. eum ignota oportere euripidis te vidit possim qui vim. tamquam postulant te Id

Preview

3 articles side by side, with content side by side

oportere

eam et

Dictas dicunt

voluptua conclusionemque mei eum ad enim quidam appareat. sea et essent appareat, Ne mei epicurei antiopam temporibus At qui dolore oblique accusam facete legendos aliquando

sonet

fierent mentitum

qui ad

epicurei lobortis. vim Ut nec regione, malorum Id oratio voluptua conclusionemque mei eum ad. enim quidam appareat sea et essent appareat Ne mei epicurei, antiopam temporibus At qui dolore oblique accusam facete legendos aliquando vel cu Ea eum vocent veritus

case

usu scaevola incorrupte

nam ut

quas sonet antiopam detraxit expetenda vix an In verear labores, probatus mel Has aliquid adipiscing te Sea torquatos democritum no Ad sale animal cum.

Preview

2 articles side by side, with content side by side

qui

et audiam

sed Ad

Deterruisset consectetuer vis ad in mediocrem salutatus. sit Cu eum. ignota oportere euripidis te vidit. possim qui vim tamquam. postulant te Id paulo, prodesset. persecuti quo atqui facilisis te nec Usu ne, liber singulis instructior est id cotidieque. definitiones Mucius eleifend comprehensam eos ea. cu case regione vel Mel alii

instructior

animal scriptorem ad

eleifend at eos

quidam appareat sea et essent appareat. Ne mei. epicurei antiopam. temporibus At. qui dolore oblique accusam facete legendos aliquando vel. cu. Ea eum vocent. veritus utinam. possit. ea vis Has ut nibh. choro doming. Dicta legere. nec eu Mutat, malorum. contentiones cum, ea. vix vidit temporibus. at Doctus eruditi

Preview

Full width articles

pri

amet pri an

suscipiantur vis

aliquando vel cu Ea eum vocent veritus utinam. possit, ea vis Has. ut nibh choro

odio

cum ei Usu

mazim inciderint

Cu eum ignota oportere euripidis te vidit possim, qui, vim tamquam postulant te Id paulo prodesset persecuti quo atqui facilisis, te nec Usu,

animal

eirmod Ea

te Vim augue

in mediocrem, salutatus sit Cu eum. ignota oportere euripidis. te vidit. possim qui vim tamquam

Preview

Full width articles, alternating positions

consectetuer

vis ad in

prodesset persecuti quo

sit amet. pri an quas sonet. antiopam detraxit expetenda, vix an In verear labores, probatus mel Has aliquid. adipiscing te. Sea torquatos democritum no Ad sale animal cum omnis comprehensam ad mel Mea nominavi invenire, eu Duo ne melius eripuit mel vitae regione. dissentiet. ad, Eam ex. sale. autem nemore

apeirian

accusam facete legendos

audiam fierent

qui vim tamquam postulant. te Id, paulo prodesset persecuti. quo atqui facilisis te. nec Usu ne liber singulis. instructior

docendi

primis platonem

aeterno in ius

Ut nec regione malorum Id. oratio voluptua conclusionemque mei eum ad enim quidam appareat sea et essent appareat, Ne mei. epicurei antiopam temporibus At qui dolore oblique accusam. facete legendos aliquando vel cu Ea eum. vocent, veritus. utinam. possit ea vis Has ut nibh. choro. doming, Dicta legere nec eu Mutat

How this page was made

KXBSparkArticleList.cshtml

    
@using KXB.Spark.ArticleList
@model Web.ViewModels.SparkViewModel
@{
    Layout = "~/Views/Layouts/_Layout.cshtml";


    var fourHorizontal = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 4, renderMode: ArticleListRenderMode.Horizontal, numberOfArticlesPerRow: NumberOfArticlesPerRow.Four);
    var threeHorizontal = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 3, renderMode: ArticleListRenderMode.Horizontal);
    var defaultRandom = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 3);
    var defaultTwoArticles = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 2, numberOfArticlesPerRow: NumberOfArticlesPerRow.Two);
    var defaultFullwidth = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 3, numberOfArticlesPerRow: NumberOfArticlesPerRow.One);
    var fullwidthAlternating = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 3, numberOfArticlesPerRow: NumberOfArticlesPerRow.One, renderMode: ArticleListRenderMode.SideBySideImageAlternating);

    var fourHorizontalWithLink = KXB.Spark.ArticleList.ArticleList.GenerateInstance(numberOfArticles: 4, renderMode: ArticleListRenderMode.Horizontal, numberOfArticlesPerRow: NumberOfArticlesPerRow.Four, linkText: "test");

}
@Html.Partial("~/Views/Partials/_InstallationGuide.cshtml", Model.NugetModel)
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">4 articles side by side</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", fourHorizontal)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", fourHorizontal)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">4 articles side by side with links</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", fourHorizontalWithLink)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", fourHorizontalWithLink)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">3 articles side by side</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", threeHorizontal)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", threeHorizontal)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">3 articles side by side, with content side by side</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", defaultRandom)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", defaultRandom)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">2 articles side by side, with content side by side</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", defaultTwoArticles)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", defaultTwoArticles)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Full width articles</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", defaultFullwidth)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", defaultFullwidth)
</div>
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Full width articles, alternating positions</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ArticleList.cshtml", fullwidthAlternating)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", fullwidthAlternating)
</div>