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

vitae

comprehensam eos

sint Veritus vivendo

consectetuer In, pro. dicta invenire Eu mea. semper facete, mnesarchum cu albucius adolescens qui et periculis repudiandae vituperatoribus duo Quem delenit inciderint cum ea no

dicta invenire Eu

veritus interesset ea

ea vix vidit. temporibus at Doctus eruditi ea has tale, dicant, eleifend at eos Lucilius nominati eu est has ei odio meis mollis, cum, cu. numquam constituam consectetuer In pro, dicta invenire Eu. mea semper. facete mnesarchum cu albucius adolescens qui et periculis repudiandae vituperatoribus duo

Lucilius

cu albucius

ipsum dolor

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 ei odio meis mollis cum cu. numquam, constituam, consectetuer In pro dicta invenire Eu

aliquando

at Sit in

et vel modo

contentiones cum ea vix vidit temporibus, at, Doctus eruditi ea has tale. dicant. eleifend at eos Lucilius nominati eu est has ei, odio. meis mollis cum cu, numquam constituam consectetuer, In pro dicta invenire Eu mea semper facete mnesarchum cu

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "comprehensam eos",
      "Subtitle": "sint\r\nVeritus vivendo",
      "Label": "vitae",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "fuisset",
        "Title": "fabulas",
        "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": "dicta invenire Eu",
      "Subtitle": "veritus interesset ea",
      "Label": "no",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "consectetuer In",
        "Title": "temporibus at",
        "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": "cu albucius",
      "Subtitle": "ipsum dolor",
      "Label": "Lucilius",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "iudicabit te Vim augue",
        "Title": "cum ea",
        "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": "at Sit in",
      "Subtitle": "et vel modo",
      "Label": "aliquando",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "iudicabit te Vim augue",
        "Title": "Inermis",
        "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

purto

comprehensam eos

convenire qui

invenire Eu mea semper. facete mnesarchum cu albucius adolescens, qui, et periculis repudiandae vituperatoribus duo Quem delenit inciderint cum ea no prima cetero voluptaria pro Nam an error doctus invidunt mazim, indoctum ei ius, Hinc equidem cum, ei Usu eu mazim,

fuisset

eius iudicabit te

augue vitae

audire vivendum Sit. ut lorem persius, No. eros fabulas theophrastus eam et epicurei lobortis vim Ut nec regione malorum Id oratio voluptua conclusionemque, mei. eum

Doctus eruditi

vis no

singulis instructior est id cotidieque definitiones Mucius eleifend 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,

sint Veritus

no at mazim

qui et periculis

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

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "comprehensam eos",
      "Subtitle": "convenire qui",
      "Label": "purto",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "id dictas fuisset principes",
        "Title": "eum ignota",
        "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": "eius iudicabit te",
      "Subtitle": "augue vitae",
      "Label": "fuisset",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "cum",
        "Title": "malorum\r\nId oratio",
        "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": "Doctus eruditi",
      "Subtitle": "vis no",
      "Label": "no",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "an In verear labores",
        "Title": "ad in mediocrem salutatus",
        "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": "no at mazim",
      "Subtitle": "qui et periculis",
      "Label": "sint\r\nVeritus",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "nec",
        "Title": "vide",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    }
  ],
  "ArticleListRenderMode": 3,
  "NumberOfArticlesPerRow": 0
}

Preview

3 articles side by side

Sit

ne liber singulis

vim Ut

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 ei odio meis. mollis cum cu numquam constituam consectetuer. In pro dicta invenire Eu, mea, semper facete mnesarchum. cu albucius. adolescens qui

vim

apeirian duo te

antiopam temporibus At

ad, vix Ut, usu nullam audire contentiones mel facilisis vituperatoribus, ne Duo id dictas. fuisset principes usu. scaevola incorrupte at Sit,

senserit

no prima

ut nibh choro

te quod mundi invenire cum. 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

Preview

3 articles side by side, with content side by side

fuisset

voluptua conclusionemque mei

sumo audire vivendum

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. fuisset principes usu. scaevola incorrupte at Sit in facete efficiendi Graeco assentior et

has

ius docendi nominavi

qui no purto

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

senserit vim at

te vidit

eu sit qui at senserit intellegam Ius at case reformidans Ea tritani offendit per quo. ad veri

Preview

2 articles side by side, with content side by side

nemore reque animal

Ne mei

sale. autem 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 epicurei, lobortis

animal

autem nemore

legendos aliquando

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

Preview

Full width articles

nec Usu

his tale sint Veritus

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 est id. cotidieque definitiones Mucius eleifend comprehensam eos ea

quo ea

modo nemore

usu sumo audire vivendum Sit ut lorem persius No, eros, fabulas theophrastus. eam et 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

vel

reque animal

cum ea simul

eu mazim. 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 nominavi eu sit qui, at senserit intellegam

Preview

Full width articles, alternating positions

euripidis Usu

per ne

legere nec eu Mutat

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

dissentiet

ad vix Ut

cum cu numquam

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. fuisset

suscipiantur

mundi invenire

dicta invenire Eu

eam et 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 utinam possit, ea

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>