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

ne Duo

sit amet pri

sale autem

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

vix an In

dissentiet ad Eam

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.

vitae

amet pri an

Eam ex

cum ei Usu 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

mentitum

dissentiet ad Eam

euripidis Usu eius iudicabit

animal cum omnis comprehensam. ad mel Mea nominavi invenire eu. Duo ne melius, eripuit mel vitae regione dissentiet. ad

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "sit amet pri",
      "Subtitle": "sale autem",
      "Label": "ne\r\nDuo",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "enim",
        "Title": "cu Ea eum",
        "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": "vix an In",
      "Subtitle": "dissentiet ad Eam",
      "Label": "ad",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "et",
        "Title": "recteque te Deleniti apeirian",
        "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": "amet pri an",
      "Subtitle": "Eam ex",
      "Label": "vitae",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "Vide mutat",
        "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": "dissentiet ad Eam",
      "Subtitle": "euripidis\r\nUsu eius iudicabit",
      "Label": "mentitum",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "indoctum",
        "Title": "essent",
        "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

dolore

ut nibh

munere per ne

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. Ad. elit munere per,

periculis

ut quo

in facete efficiendi

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

detraxit

atqui facilisis

pri et

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

invidunt

eos debet

mei epicurei antiopam

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

{
  "ExtraClassNames": "",
  "Articles": [
    {
      "Link": {
        "ExtraClassNames": "",
        "Label": "",
        "Content": {},
        "Url": "#",
        "Target": 0,
        "Icon": null,
        "LabelPrefix": null,
        "LabelPostfix": null
      },
      "ExtraClassNames": "",
      "HasWrappingLink": false,
      "Title": "ut nibh",
      "Subtitle": "munere per ne",
      "Label": "dolore",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "vis no at",
        "Title": "quo 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": "ut quo",
      "Subtitle": "in facete efficiendi",
      "Label": "periculis",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "an",
        "Title": "nec",
        "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": "atqui facilisis",
      "Subtitle": "pri et",
      "Label": "detraxit",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "ad Eam ex",
        "Title": "temporibus At qui",
        "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": "eos debet",
      "Subtitle": "mei epicurei antiopam",
      "Label": "invidunt",
      "Image": {
        "ExtraClassNames": null,
        "Url": "http://via.placeholder.com/400x400",
        "Alt": "nam",
        "Title": "te Vim",
        "AspectRatio": 1,
        "Is404": true
      },
      "ArticlePrefix": null,
      "ArticleCenter": null,
      "ArticlePostfix": null,
      "IntroText": {},
      "ArticleRenderMode": 0
    }
  ],
  "ArticleListRenderMode": 3,
  "NumberOfArticlesPerRow": 0
}

Preview

3 articles side by side

te vidit possim

incorrupte at

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 Ad. elit. munere, per

augue

quo diam

eu mazim inciderint

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 Mundi timeam probatus quo ea

veritus interesset ea

eius iudicabit

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

Preview

3 articles side by side, with content side by side

essent

Ius at

Dicta legere

ad enim, quidam appareat sea, et essent appareat Ne. mei epicurei. antiopam temporibus, At qui,

dolore

per ne

in mediocrem

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, te. vidit, possim qui vim, tamquam postulant. te Id. paulo prodesset. persecuti. quo atqui facilisis te

menandri

per quo ad

In pro dicta

torquatos democritum no Ad sale animal cum omnis, comprehensam ad, mel Mea nominavi invenire eu Duo. ne melius eripuit

Preview

2 articles side by side, with content side by side

no purto

te nec

aeterno 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, te Deleniti apeirian duo te quod mundi invenire cum, ea simul denique. convenire qui

vitae

equidem cum

In verear

albucius. adolescens. qui et periculis repudiandae vituperatoribus duo Quem delenit inciderint cum. ea no, prima cetero, voluptaria

Preview

Full width articles

appareat

vivendum Sit ut

facete mnesarchum cu

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.

equidem

temporibus At qui

paulo prodesset persecuti

et vel modo nemore. Ut, vide ridens. vim quis. dolore ad vix Ut usu nullam audire contentiones.

consectetuer

sea et essent

Cu eum ignota

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, alternating positions

efficiendi

Vide mutat persius

menandri nam ut

hendrerit qui no purto, euripidis Usu eius iudicabit te Vim. augue vitae appareat te Dictas dicunt aeterno in ius docendi nominavi

qui

ut quo diam

mazim indoctum ei

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,

mnesarchum

vim tamquam

albucius adolescens

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, Ad elit munere per

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>