KXB.Spark

.NET frontend modules

Installation

PM> Install-Package KXB.Spark.ListOfPeople -Version 0.0.7

KXB.Spark.ListOfPeople on NuGet.org

Preview

With all data

Robin Kleveland

ea no prima, cetero voluptaria pro Nam. an error doctus invidunt mazim indoctum ei ius

Epost:

Robin.Kleveland@yahoo.io

Telefon:

00114150

oratio:

albucius adolescens qui et

ei:

paulo prodesset persecuti quo

probatus:

vis no at mazim

Sofie Dal

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

Epost:

Sofie.Dal@msn.com

Telefon:

78412246

ad:

choro doming Dicta

mazim:

qui et periculis repudiandae

numquam:

vidit temporibus at Doctus

Odd Harald Dyp

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

Epost:

Odd.Harald.Dyp@gmail.co.uk

Telefon:

02726013

vituperatoribus:

oblique accusam

no:

alii graeci prompta

audire:

id dictas fuisset principes

Sofie Lie

facete legendos, aliquando. vel cu Ea eum vocent veritus utinam possit ea

Epost:

Sofie.Lie@outlook.it

Telefon:

31357118

case:

eum ad

Dicta:

vidit possim

eos:

Deleniti apeirian duo te

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Robin Kleveland",
      "Id": "3bb89fc8ff024ec597c6021646ac57d6",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "ea no prima, cetero voluptaria pro\r\nNam. an error doctus invidunt mazim indoctum ei ius",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Robin.Kleveland@yahoo.io",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "00114150",
          "Type": 2
        },
        {
          "Label": "oratio",
          "Value": "albucius adolescens qui et",
          "Type": 0
        },
        {
          "Label": "ei",
          "Value": "paulo prodesset persecuti quo",
          "Type": 0
        },
        {
          "Label": "probatus",
          "Value": "vis no at mazim",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Sofie Dal",
      "Id": "f1a18f2c663844ee992d8a766e3cb80b",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "oblique accusam. facete legendos aliquando, vel cu. Ea eum vocent veritus utinam possit. ea vis Has. ut nibh choro doming Dicta legere nec eu\r\nMutat malorum contentiones",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Sofie.Dal@msn.com",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "78412246",
          "Type": 2
        },
        {
          "Label": "ad",
          "Value": "choro doming Dicta",
          "Type": 0
        },
        {
          "Label": "mazim",
          "Value": "qui et periculis repudiandae",
          "Type": 0
        },
        {
          "Label": "numquam",
          "Value": "vidit temporibus at Doctus",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Odd Harald Dyp",
      "Id": "08e5856f8c2d4efb9e13c01ef9858c54",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "Inermis senserit vim, at Vide mutat persius mel ne, ut. quo diam oratio eirmod Ea nam enim singulis hendrerit qui no purto",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Odd.Harald.Dyp@gmail.co.uk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "02726013",
          "Type": 2
        },
        {
          "Label": "vituperatoribus",
          "Value": "oblique accusam",
          "Type": 0
        },
        {
          "Label": "no",
          "Value": "alii graeci prompta",
          "Type": 0
        },
        {
          "Label": "audire",
          "Value": "id dictas fuisset principes",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Sofie Lie",
      "Id": "ed87ef0952a4461d8e61edcef57aeebd",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "facete legendos, aliquando. vel cu Ea eum vocent veritus utinam possit ea",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Sofie.Lie@outlook.it",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "31357118",
          "Type": 2
        },
        {
          "Label": "case",
          "Value": "eum ad",
          "Type": 0
        },
        {
          "Label": "Dicta",
          "Value": "vidit possim",
          "Type": 0
        },
        {
          "Label": "eos",
          "Value": "Deleniti apeirian duo te",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

Without description, but with 5 properties

Bartholomew Pettersen

Epost:

Bartholomew.Pettersen@knowit.io

Telefon:

75033727

purto:

enim singulis

paulo:

ei ius Hinc

ex:

torquatos democritum no Ad

Sofie Karoliussen

Epost:

Sofie.Karoliussen@example.se

Telefon:

18882844

dolor:

regione dissentiet ad Eam

legendos:

diam oratio

cum:

Mundi timeam probatus

Steffen Dyp

Epost:

Steffen.Dyp@msn.com

Telefon:

01667257

reformidans:

eos debet recteque

vel:

quo ad

Deleniti:

has ei

Erlend Huseby

Epost:

Erlend.Huseby@outlook.se

Telefon:

52431855

ad:

Doctus eruditi

in:

mel vitae

qui:

vocent veritus

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Bartholomew Pettersen",
      "Id": "58fb967bc2124d999da71dccdd3556c9",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Bartholomew.Pettersen@knowit.io",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "75033727",
          "Type": 2
        },
        {
          "Label": "purto",
          "Value": "enim singulis",
          "Type": 0
        },
        {
          "Label": "paulo",
          "Value": "ei ius Hinc",
          "Type": 0
        },
        {
          "Label": "ex",
          "Value": "torquatos democritum no Ad",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Sofie Karoliussen",
      "Id": "167a33c5936d4fe6b9b7da393b39edbf",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Sofie.Karoliussen@example.se",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "18882844",
          "Type": 2
        },
        {
          "Label": "dolor",
          "Value": "regione dissentiet ad Eam",
          "Type": 0
        },
        {
          "Label": "legendos",
          "Value": "diam oratio",
          "Type": 0
        },
        {
          "Label": "cum",
          "Value": "Mundi timeam probatus",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Steffen Dyp",
      "Id": "726f2b4d18fb495b8899a46318c71f43",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Steffen.Dyp@msn.com",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "01667257",
          "Type": 2
        },
        {
          "Label": "reformidans",
          "Value": "eos debet recteque",
          "Type": 0
        },
        {
          "Label": "vel",
          "Value": "quo ad",
          "Type": 0
        },
        {
          "Label": "Deleniti",
          "Value": "has ei",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Erlend Huseby",
      "Id": "66e85a2efacc4639a9b047eefaad0d04",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Erlend.Huseby@outlook.se",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "52431855",
          "Type": 2
        },
        {
          "Label": "ad",
          "Value": "Doctus eruditi",
          "Type": 0
        },
        {
          "Label": "in",
          "Value": "mel vitae",
          "Type": 0
        },
        {
          "Label": "qui",
          "Value": "vocent veritus",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With out any properties, besides email and phone

Steffen Kleveland

Epost:

Steffen.Kleveland@msn.it

Telefon:

32338872

Karoline Garmandslund

Epost:

Karoline.Garmandslund@hotmail.no

Telefon:

84812628

Pål Ugland

Epost:

Pål.Ugland@hotmail.org

Telefon:

11587051

Ingeborg Davidsen

Epost:

Ingeborg.Davidsen@live.no

Telefon:

08206316

Preview

Without any properties

Odd Harald Karoliussen

Håvard Kopperud

Olga Olsen

Wolfgang Amadeus Pilskog

Preview

Without image, but with phone and email

Jørgen Huseby

Epost:

Jørgen.Huseby@yahoo.it

Telefon:

70262735

Kristine Å

Epost:

Kristine.Å@live.org

Telefon:

27133218

Sofie Dramstad

Epost:

Sofie.Dramstad@hotmail.io

Telefon:

08170778

Håvard Kopperud

Epost:

Håvard.Kopperud@live.co.uk

Telefon:

55688407

Preview

With three people per row

Lars Ulleberg

Epost:

Lars.Ulleberg@yahoo.no

Telefon:

85216402

possim:

tritani offendit per quo

dicant:

eu mazim inciderint Inermis

no:

oblique accusam facete legendos

Thomas Talberg

Epost:

Thomas.Talberg@knowit.it

Telefon:

16742804

mollis:

enim quidam

vim:

usu nullam

nominati:

apeirian duo te

Thomas Prestegård

Epost:

Thomas.Prestegård@knowit.dk

Telefon:

17821381

nam:

ne ut

postulant:

ignota oportere euripidis

efficiendi:

Ea nam enim

{
  "NumberOfPeoplePerRow": 1,
  "People": [
    {
      "Name": "Lars Ulleberg",
      "Id": "022993a290a4488295db0bed4e1ac212",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Lars.Ulleberg@yahoo.no",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "85216402",
          "Type": 2
        },
        {
          "Label": "possim",
          "Value": "tritani offendit per quo",
          "Type": 0
        },
        {
          "Label": "dicant",
          "Value": "eu mazim inciderint Inermis",
          "Type": 0
        },
        {
          "Label": "no",
          "Value": "oblique accusam facete legendos",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Thomas Talberg",
      "Id": "8dd4e3b71286432091c2b1e3aa5c0797",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Thomas.Talberg@knowit.it",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "16742804",
          "Type": 2
        },
        {
          "Label": "mollis",
          "Value": "enim quidam",
          "Type": 0
        },
        {
          "Label": "vim",
          "Value": "usu nullam",
          "Type": 0
        },
        {
          "Label": "nominati",
          "Value": "apeirian duo te",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Thomas Prestegård",
      "Id": "011ef3943ee6465dbbece4f14a2bbc9b",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Thomas.Prestegård@knowit.dk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "17821381",
          "Type": 2
        },
        {
          "Label": "nam",
          "Value": "ne ut",
          "Type": 0
        },
        {
          "Label": "postulant",
          "Value": "ignota oportere euripidis",
          "Type": 0
        },
        {
          "Label": "efficiendi",
          "Value": "Ea nam enim",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With two people per row

Emmanuel Lie

Epost:

Emmanuel.Lie@msn.edu

Telefon:

37375513

hendrerit:

doctus invidunt mazim indoctum

Ad:

Ut usu nullam audire

prompta:

vivendum Sit ut lorem

Bartholomew Dramstad

Epost:

Bartholomew.Dramstad@live.io

Telefon:

77666130

ad:

malorum Id oratio voluptua conclusionemque

his:

case regione

Has:

cum ea no

Preview

With 4:3 aspect ratio

Ellinor Ugelstad

Elisabeth Ugelstad

Hege Talberg

Erlend Ugelstad

Preview

With 3:2 aspect ratio

Thomas Lie

Montgomery Dyp

Peder Karoliussen

Bartholomew Ugelstad

Preview

With 16:9 aspect ratio

Ellinor Holthe

Maximilianus Vedvik

Petter Olafsen

Ingeborg Ulleberg

Preview

With 2:1 aspect ratio

Petter Vedvik

Birgitte Prestegård

Bartholomew Ugelstad

Hans Ugland

How this page was made

KXBSparkListOfPeople.cshtml

    
@model Web.ViewModels.SparkViewModel

@{
    Layout = "~/Views/Layouts/_Layout.cshtml";
    var colorGenerator = new KXB.Spark.DummyData.Generators.ColorGenerator();

    var numberOfPeoplePerPreview = 4;

    var listOfPeople1 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview);
    var listOfPeople2 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, true, true, 3);
    var listOfPeople3 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, true, true, 0);
    var listOfPeople4 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0);
    var listOfPeople5 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, false, false, true, true, 0);
    var listOfPeople6 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(3, true, false, true, true, 3, numberOfPeoplePerRow: KXB.Spark.ListOfPeople.NumberOfPeoplePerRow.Three);
    var listOfPeople7 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(2, true, false, true, true, 3, numberOfPeoplePerRow: KXB.Spark.ListOfPeople.NumberOfPeoplePerRow.Two);
    var listOfPeople8 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.FourByThree);
    var listOfPeople9 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.SixteenByNine);
    var listOfPeople10 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.TwoByOne);
    var listOfPeople11 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.ThreeByTwo);
}

@Html.Partial("~/Views/Partials/_InstallationGuide.cshtml", Model.NugetModel)
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With all data</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople1)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople1)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3  class="subtitle">Without description, but with 5 properties</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople2)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople2)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With out any properties, besides email and phone</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople3)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople3)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Without any properties</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople4)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople4)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Without image, but with phone and email</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople5)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople5)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With three people per row</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople6)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople6)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With two people per row</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople7)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople7)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 4:3 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople8)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople8)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 3:2 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople11)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople11)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 16:9 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople9)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople9)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 2:1 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople10)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople10)
</div>