')
+ ->headingAsHtml(),
+ ];
+}
+```
+
+## Card options
+
+* `->width('string')`: Width of the card.
+* `->forceFullWidth()`: Force the card to be full width. A fix for nova cards order.
+* `->height('string or number'):`Height of the Card. If is called without options height will be auto. Default to nova card height.
+* `->center(boolean)`: If you want the text centered or not. Default to true
+* `->heading('string or html')`: Heading text or custom html. Default to false. No heading text is shown.
+* `->text('string or html')`: Text of the card or custom html. Default to false. No text is shown.
+* `->headingAsHtml()`: If you want to print the heading as HTML
+* `->textAsHtml()`: If you want to print the text as HTML
+
+
+
+
diff --git a/resources/js/card.js b/resources/js/card.js
new file mode 100644
index 0000000..f64814b
--- /dev/null
+++ b/resources/js/card.js
@@ -0,0 +1,3 @@
+Nova.booting(Vue => {
+ Vue.component('text-card', require('./components/Card'));
+});
diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
new file mode 100644
index 0000000..de4ed5e
--- /dev/null
+++ b/resources/js/components/Card.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
{{ card.heading }}
+
+
+
+
+
{{ card.text }}
+
+
+
+
+
+
+
diff --git a/src/CardServiceProvider.php b/src/CardServiceProvider.php
new file mode 100644
index 0000000..7c25893
--- /dev/null
+++ b/src/CardServiceProvider.php
@@ -0,0 +1,32 @@
+withMeta([
+ 'center' => true,
+ 'height' => 'default',
+ 'heading' => false,
+ 'text' => false,
+ 'headingRaw' => false,
+ 'textRaw' => false,
+ 'forceFullWidth' => false,
+ ]);
+ }
+
+ /**
+ * The width of the card (1/3, 1/2, or full).
+ *
+ * @var string
+ */
+ public $width = '1/3';
+
+ /**
+ * Get the component name for the element.
+ *
+ * @return string
+ */
+ public function component()
+ {
+ return 'text-card';
+ }
+
+ /**
+ * Set the text link
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function center($boolean = true)
+ {
+ return $this->withMeta(['center' => $boolean]);
+ }
+
+ /**
+ * Set the text link
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function heading($text)
+ {
+ return $this->withMeta(['heading' => $text]);
+ }
+
+ /**
+ * Set the height of card
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function headingAsHtml()
+ {
+ return $this->withMeta(['headingRaw' => true]);
+ }
+
+ /**
+ * Set the text link
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function text($text)
+ {
+ return $this->withMeta(['text' => $text]);
+ }
+
+ /**
+ * Set the height of card
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function textAsHtml()
+ {
+ return $this->withMeta(['textRaw' => true]);
+ }
+
+ /**
+ * Set the height of card
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function height($height = 'auto')
+ {
+ return $this->withMeta(['height' => $height]);
+ }
+
+ /**
+ * Set the height of card
+ *
+ * @param array $text
+ *
+ * @return array
+ */
+ public function forceFullWidth()
+ {
+ return $this->withMeta(['forceFullWidth' => true, 'width' => '5/6']);
+ }
+
+ /**
+ * Prepare the element for JSON serialization.
+ *
+ * @return array
+ */
+ public function jsonSerialize()
+ {
+ return array_merge([
+ 'name' => str_random(16),
+ 'width' => $this->width,
+ ], parent::jsonSerialize());
+ }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
new file mode 100644
index 0000000..48ba617
--- /dev/null
+++ b/webpack.mix.js
@@ -0,0 +1,4 @@
+let mix = require('laravel-mix')
+
+mix.setPublicPath('dist')
+ .js('resources/js/card.js', 'js')