KXB.Spark

.NET frontend modules

Installation

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

Preview

With all data

Håvard Hansen

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

Epost:

Håvard.Hansen@example.edu

Telefon:

00887545

vel:

comprehensam ad mel Mea

qui:

constituam consectetuer In

temporibus:

Lorem ipsum dolor sit

Maximilianus Pilskog

no prima cetero voluptaria pro Nam an error doctus invidunt mazim indoctum ei, ius Hinc equidem cum ei Usu eu mazim inciderint Inermis

Epost:

Maximilianus.Pilskog@yahoo.no

Telefon:

45182022

lorem:

eleifend comprehensam eos

duo:

debet recteque

nam:

per veritus interesset

Emmanuel Lie

purto euripidis Usu eius iudicabit te Vim augue vitae appareat te Dictas, dicunt aeterno in ius docendi, nominavi eu sit qui at senserit. intellegam Ius. at case. reformidans Ea,

Epost:

Emmanuel.Lie@knowit.dk

Telefon:

71840732

sea:

oblique accusam facete legendos

id:

ius docendi

ut:

theophrastus eam et

Kristine Olsen

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,

Epost:

Kristine.Olsen@yahoo.co.uk

Telefon:

01263343

ius:

sed Ad elit munere

quas:

pro Nam an error

lobortis:

graeci prompta no

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Håvard Hansen",
      "Id": "bef9a807cfec44f88031db1c71241fc5",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "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\r\nId",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Håvard.Hansen@example.edu",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "00887545",
          "Type": 2
        },
        {
          "Label": "vel",
          "Value": "comprehensam ad mel\r\nMea",
          "Type": 0
        },
        {
          "Label": "qui",
          "Value": "constituam consectetuer In",
          "Type": 0
        },
        {
          "Label": "temporibus",
          "Value": "Lorem ipsum dolor sit",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Maximilianus Pilskog",
      "Id": "a882222daafb48c9b5487577106db712",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "no prima cetero voluptaria pro\r\nNam an error doctus invidunt mazim indoctum ei, ius Hinc equidem cum ei Usu eu mazim inciderint Inermis",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Maximilianus.Pilskog@yahoo.no",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "45182022",
          "Type": 2
        },
        {
          "Label": "lorem",
          "Value": "eleifend comprehensam eos",
          "Type": 0
        },
        {
          "Label": "duo",
          "Value": "debet recteque",
          "Type": 0
        },
        {
          "Label": "nam",
          "Value": "per veritus interesset",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Emmanuel Lie",
      "Id": "15ad3060db7c4c099bc0856b0b9f7fed",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "purto euripidis\r\nUsu eius iudicabit te Vim augue vitae appareat te Dictas, dicunt aeterno in ius docendi, nominavi eu sit qui at senserit. intellegam Ius. at case. reformidans Ea,",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Emmanuel.Lie@knowit.dk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "71840732",
          "Type": 2
        },
        {
          "Label": "sea",
          "Value": "oblique accusam facete legendos",
          "Type": 0
        },
        {
          "Label": "id",
          "Value": "ius docendi",
          "Type": 0
        },
        {
          "Label": "ut",
          "Value": "theophrastus eam et",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Kristine Olsen",
      "Id": "8fd40f693e3a4ade88511aa9d0c9c599",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "ne\r\nDuo, id dictas fuisset, principes usu, scaevola incorrupte at. Sit. in facete efficiendi Graeco assentior et per veritus, interesset ea sed Ad elit munere,",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Kristine.Olsen@yahoo.co.uk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "01263343",
          "Type": 2
        },
        {
          "Label": "ius",
          "Value": "sed Ad elit munere",
          "Type": 0
        },
        {
          "Label": "quas",
          "Value": "pro\r\nNam an error",
          "Type": 0
        },
        {
          "Label": "lobortis",
          "Value": "graeci prompta no",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

Without description, but with 5 properties

Tom Jørgensen

Epost:

Tom.Jørgensen@knowit.co.uk

Telefon:

85550110

mentitum:

ex sale

his:

sit Cu eum ignota

iudicabit:

melius eripuit mel vitae

Kenneth Garmandslund

Epost:

Kenneth.Garmandslund@yahoo.org

Telefon:

50331508

appareat:

te vidit

primis:

te Sea torquatos democritum

albucius:

Mundi timeam probatus quo

Thomas Dalheim

Epost:

Thomas.Dalheim@hotmail.org

Telefon:

47774656

euripidis:

euripidis te vidit

Sit:

aliquando vel cu

qui:

eum ad

Hege Kvammen

Epost:

Hege.Kvammen@gmail.no

Telefon:

78328611

scaevola:

scriptorem ad

vitae:

timeam probatus

essent:

repudiandae vituperatoribus duo

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Tom Jørgensen",
      "Id": "a44d920192c14231b64d72d22a8d99a7",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Tom.Jørgensen@knowit.co.uk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "85550110",
          "Type": 2
        },
        {
          "Label": "mentitum",
          "Value": "ex sale",
          "Type": 0
        },
        {
          "Label": "his",
          "Value": "sit Cu eum ignota",
          "Type": 0
        },
        {
          "Label": "iudicabit",
          "Value": "melius eripuit mel vitae",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Kenneth Garmandslund",
      "Id": "166d704abee74d2c9ded677e433f8594",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Kenneth.Garmandslund@yahoo.org",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "50331508",
          "Type": 2
        },
        {
          "Label": "appareat",
          "Value": "te vidit",
          "Type": 0
        },
        {
          "Label": "primis",
          "Value": "te Sea torquatos democritum",
          "Type": 0
        },
        {
          "Label": "albucius",
          "Value": "Mundi timeam probatus quo",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Thomas Dalheim",
      "Id": "577906e4ad4947d799ea70d1974bc783",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Thomas.Dalheim@hotmail.org",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "47774656",
          "Type": 2
        },
        {
          "Label": "euripidis",
          "Value": "euripidis te vidit",
          "Type": 0
        },
        {
          "Label": "Sit",
          "Value": "aliquando vel cu",
          "Type": 0
        },
        {
          "Label": "qui",
          "Value": "eum ad",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Hege Kvammen",
      "Id": "8b293742b1c24a00a155b3846196a315",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Hege.Kvammen@gmail.no",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "78328611",
          "Type": 2
        },
        {
          "Label": "scaevola",
          "Value": "scriptorem ad",
          "Type": 0
        },
        {
          "Label": "vitae",
          "Value": "timeam probatus",
          "Type": 0
        },
        {
          "Label": "essent",
          "Value": "repudiandae vituperatoribus duo",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With out any properties, besides email and phone

Sarah Holthe

Epost:

Sarah.Holthe@yahoo.se

Telefon:

43054674

Ingrid Dyp

Epost:

Ingrid.Dyp@example.com

Telefon:

25745504

Sofie Heggelund

Epost:

Sofie.Heggelund@hotmail.it

Telefon:

04145736

Stine Heggelund

Epost:

Stine.Heggelund@yahoo.net

Telefon:

35482500

Preview

Without any properties

Per Martin Huseby

Kristine Davidsen

Morten Christophersen

Inger Olsen

Preview

Without image, but with phone and email

Olga Hjelmeland

Epost:

Olga.Hjelmeland@example.it

Telefon:

03585380

Ingrid Hope

Epost:

Ingrid.Hope@knowit.io

Telefon:

13101010

Kristine Pettersen

Epost:

Kristine.Pettersen@live.com

Telefon:

65158286

Ola Prestegård

Epost:

Ola.Prestegård@yahoo.co.uk

Telefon:

04385805

Preview

With three people per row

Emmanuel Pettersen

Epost:

Emmanuel.Pettersen@hotmail.co.uk

Telefon:

77876586

audire:

quidam appareat sea

nec:

nibh choro

dissentias:

assentior et per

Kristine Talberg

Epost:

Kristine.Talberg@yahoo.dk

Telefon:

18561372

persius:

has tale dicant eleifend

malorum Id:

te vidit

mel Mea:

scriptorem ad his

Birgitte Davidsen

Epost:

Birgitte.Davidsen@outlook.edu

Telefon:

75136264

aeterno:

mel vitae regione

case:

augue vitae

Mel:

dissentiet ad

{
  "NumberOfPeoplePerRow": 1,
  "People": [
    {
      "Name": "Emmanuel Pettersen",
      "Id": "a698330ac5e9480c9b1c0151812dbdef",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Emmanuel.Pettersen@hotmail.co.uk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "77876586",
          "Type": 2
        },
        {
          "Label": "audire",
          "Value": "quidam appareat sea",
          "Type": 0
        },
        {
          "Label": "nec",
          "Value": "nibh choro",
          "Type": 0
        },
        {
          "Label": "dissentias",
          "Value": "assentior et per",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Kristine Talberg",
      "Id": "8ff98225efc745dc8ce0b9e3cdd3c263",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Kristine.Talberg@yahoo.dk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "18561372",
          "Type": 2
        },
        {
          "Label": "persius",
          "Value": "has tale dicant eleifend",
          "Type": 0
        },
        {
          "Label": "malorum\r\nId",
          "Value": "te vidit",
          "Type": 0
        },
        {
          "Label": "mel\r\nMea",
          "Value": "scriptorem ad his",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Birgitte Davidsen",
      "Id": "aae14dc7a6c940e69b7c4e4101150dc9",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Birgitte.Davidsen@outlook.edu",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "75136264",
          "Type": 2
        },
        {
          "Label": "aeterno",
          "Value": "mel vitae regione",
          "Type": 0
        },
        {
          "Label": "case",
          "Value": "augue vitae",
          "Type": 0
        },
        {
          "Label": "Mel",
          "Value": "dissentiet ad",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With two people per row

Elise Dokken

Epost:

Elise.Dokken@gmail.io

Telefon:

55760502

comprehensam:

tritani offendit per quo

tale:

mollis cum

nibh:

Ne mei epicurei

Per Martin Olsen

Epost:

Per.Martin.Olsen@gmail.edu

Telefon:

81230120

antiopam:

enim quidam appareat

vis:

his vim et

vix:

sit qui

Preview

With 4:3 aspect ratio

Ellinor Ugland

Kari Dokken

Marielle Ugelstad

Steffen Jørgensen

Preview

With 3:2 aspect ratio

Håvard Ugelstad

Steffen Larsen

Nina Pilskog

Pål Olafsen

Preview

With 16:9 aspect ratio

Bartholomew Ødegård

Kenneth Holthe

Olga Rommetveit

Thomas Christophersen

Preview

With 2:1 aspect ratio

Marit Prestegård

Hans Kvammen

Harald Hansen

Jørgen Holthe

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>