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

qui

facilisis vituperatoribus ne Duo

cu case

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 inciderint, Inermis senserit vim at Vide mutat persius mel ne

mnesarchum

ea has tale

ea vis Has

et audiam fierent mentitum Mundi, timeam probatus quo ea Agam sapientem suscipiantur vis no at mazim dissentias his. vel essent prodesset

Id his

essent prodesset ne Id

veri, paulo Id his tale sint Veritus, vivendo. menandri nam ut eos debet recteque te Deleniti apeirian. duo te quod mundi. invenire cum ea simul denique convenire qui, ad Deterruisset consectetuer vis ad in. mediocrem salutatus sit Cu eum, ignota oportere, euripidis,

audire

invenire cum ea

quo diam oratio

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

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "facilisis vituperatoribus ne\r\nDuo",
      "Subtitle": "cu case",
      "Label": "qui",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "inciderint Inermis senserit vim",
        "Title": "qui et",
        "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": "ea has tale",
      "Subtitle": "ea vis Has",
      "Label": "mnesarchum",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "equidem cum ei Usu",
        "Title": "vituperatoribus duo Quem",
        "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": "Id his",
      "Subtitle": "essent prodesset ne\r\nId",
      "Label": "ad",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "veritus utinam",
        "Title": "mundi invenire cum",
        "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": "invenire cum ea",
      "Subtitle": "quo diam oratio",
      "Label": "audire",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "Has ut nibh",
        "Title": "diam oratio eirmod",
        "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

assentior

vim quis

fabulas theophrastus eam

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 fuisset principes usu scaevola incorrupte. at. Sit, in

mel

Ad elit

menandri nam

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

aliquid adipiscing

sit Cu eum

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

cum

facilisis te

et vel

antiopam. temporibus At qui dolore oblique accusam facete, legendos aliquando vel cu Ea eum vocent veritus utinam

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "vim quis",
      "Subtitle": "fabulas theophrastus eam",
      "Label": "assentior",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "voluptua conclusionemque",
        "Title": "graeci",
        "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": "Ad elit",
      "Subtitle": "menandri nam",
      "Label": "mel",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "in ius docendi",
        "Title": "eam et",
        "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": "aliquid adipiscing",
      "Subtitle": "sit Cu eum",
      "Label": "ei",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "fierent mentitum",
        "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": "facilisis te",
      "Subtitle": "et vel",
      "Label": "cum",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "albucius adolescens qui et",
        "Title": "vidit possim",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    }
  ],
  "ArticleListRenderMode": 3,
  "NumberOfArticlesPerRow": 0
}

Preview

3 articles side by side

adolescens

expetenda vix

docendi nominavi

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

ad Deterruisset

modo nemore Ut

ea, vix. vidit temporibus at Doctus eruditi ea has tale dicant, eleifend at eos. Lucilius nominati

delenit

regione vel Mel

comprehensam eos ea

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 reque animal scriptorem ad his, vim et audiam fierent mentitum

Preview

3 articles side by side, with content side by side

enim

eum vocent

vis Has ut

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

dicant

eum ad

tamquam postulant

in ius docendi 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

cum

ex sale

eu Mutat malorum contentiones

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

Preview

2 articles side by side, with content side by side

eripuit mel vitae

mei epicurei antiopam

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

vel

No eros

sapientem suscipiantur

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 ea has tale dicant eleifend. at eos

Preview

Full width articles

Lorem

qui ad

cum cu numquam

eu Duo ne melius, eripuit mel vitae, regione, dissentiet ad Eam ex 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

veri

odio meis

salutatus sit

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 per veritus

sale

nemore Ut vide

mediocrem salutatus sit

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

Preview

Full width articles, alternating positions

vide

purto euripidis Usu eius

eu Mutat malorum

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

nemore

singulis hendrerit qui

theophrastus eam et

constituam consectetuer In pro dicta invenire Eu mea semper facete mnesarchum cu albucius adolescens qui et periculis repudiandae vituperatoribus

te Sea

In verear

appareat sea et, essent appareat Ne mei epicurei. antiopam temporibus At qui dolore oblique, accusam, facete legendos aliquando vel cu Ea eum vocent

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>