Typography

Heading 1

<h1>Heading 1</h1>

<span class="as-h1">Heading 1</span>

Heading 2

<h2>Heading 2</h2>

<span class="as-h2">Heading 2</span>

Heading 3

<h3>Heading 3</h3>

<span class="as-h3">Heading 3</span>

Heading 4

<h4>Heading 4</h4>

<span class="as-h4">Heading 4</span>

Heading 5

<h5>Heading 5</h5>

<span class="as-h5">Heading 5</span>

Heading 6

<h6>Heading 6</h6>

<span class="as-h6">Heading 6</span>

This is a paragraph of text to demonstrate typography styles. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>
	This is a paragraph of text to demonstrate typography styles.
	Lorem ipsum dolor sit amet, consectetur
	adipiscing elit. Sed do eiusmod tempor
	incididunt ut labore et dolore magna aliqua.
</p>

Avatar

Property Name Property Description :firstName First name of the user :lastName Last name of the user :imageUrl Profile image URL of the user :showNotification Boolean, if true the notification badge will be shown :notificationPosition The position of the notification badge: top-right, top-left, bottom-right, bottom-left :togglePopoverTarget The ID of the popover to be toggled on click

<x-osc-ui::avatar :firstName="'John'"
                  :lastName="'Doe'"
/>

<x-osc-ui::avatar :firstName="'John'"
                  :lastName="'Doe'"
                  :imageUrl="'{{ url('assets/media/img/profile.jpg') }}'"
/>

<x-osc-ui::avatar :firstName="'John'"
                  :lastName="'Doe'"
                  :imageUrl="'{{ url('assets/media/img/profile.jpg') }}'"
                  :togglePopoverTarget="'account-menu-popover'"
/>

<x-osc-ui::popover :popoverId="'account-menu-popover'"
                   :items="$items" />

Button

Property Name Property Description :name Name of the button :buttonType Type of the button between: primary, secondary, tertiary, icon-only :submit Boolean, if true the button will be of type submit :prefix Icon prefix of the button :suffix Icon suffix of the button :ajax Boolean, if true the button will trigger an ajax call :dataAttributes Array, the array of data-* attributes of the button :additionalClasses CSS additional classes of the link

<x-osc-ui::button :name="'send'"
                  :submit="true"
                  :buttonType="'primary'">
	Send
</x-osc-ui::button>

<x-osc-ui::button :name="'send'"
                  :buttonType="'secondary'"
                  :prefix="'inbox-up'">
	Send
</x-osc-ui::button>

<x-osc-ui::button :name="'send'"
                  :buttonType="'tertiary'"
                  :suffix="'mail'"
                  :dataAttributes="['tracking-id' => '12345']">
	Mail Button
</x-osc-ui::button>

<x-osc-ui::button :name="'send'"
                  :buttonType="'icon-only'">
	<iconify-icon icon="iconify:star"></iconify-icon>
</x-osc-ui::button>

Card

Property Name Property Description :title Title of the card :copy Copy of the card, can contain HTML :ctaButton Boolean, if true a button will be shown as call to action :ctaUrl The URL of the call to action link :ctaLabel The label of the call to action button or link :ctaTarget The target attribute of the call to action link :imageUrl The URL of the image to be shown on top of the card :tags Array, the array of tags to be shown on top of the card :date The date to be shown on top of the card :dataAttributes Array, the array of data-* attributes of the card button :additionalClasses CSS additional classes of the card

Tag Label

Title of the Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Open Link

<?php

$tags = [];

$tags[] = [
	'name'  => 'tag-name',
	'label' => 'Tag Label',
];

?>

<x-osc-ui::card :copy="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"
                :tags="$tags"
                :imageUrl="url('assets/media/img/placeholder.jpg')"
                :ctaButton="false"
                :ctaUrl="'https://www.sacrocuore.it'"
                :ctaLabel="'Open Link'"
                :ctaTarget="'_blank'" />

Tag Label Tag Label 2

March 10, 2024

Title of the Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<?php

$tags = [];

$tags[] = [
	'name'  => 'tag-name',
	'label' => 'Tag Label',
];

$tags[] = [
	'name'  => 'tag-name-2',
	'label' => 'Tag Label 2',
];

$dataAttributes = [
	'micromodal-trigger' => 'modal-video-card',
];

?>

<x-osc-ui::card :title="'Title of the Card'"
                :copy="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"
                :tags="$tags"
                :imageUrl="url('assets/media/img/placeholder.jpg')"
                :ctaButton="true"
                :ctaLabel="'Watch Video'"
                :dataAttributes="$dataAttributes" />

Chip

Property Name Property Description :chip Chip value to be displayed :status The status of the chip, can be "active", "inactive" or "readonly" :additionalClasses CSS additional classes of the chip

Chip inactive

<x-osc-ui::chip :chip="'Chip inactive'" :status="'inactive'" />

Chip active

<x-osc-ui::chip :chip="'Chip active'" :status="'active'" />

Chip readonly

<x-osc-ui::chip :chip="'Chip readonly'" :status="'readonly'" />

Dropzone

Upload media *

osc::dropzone.line

form.dropzone_line_or

osc::dropzone.upload_file

osc::dropzone.release_file

The file size must not exceed 32 MB, and the accepted formats are jpg, png, pdf, and mp4.

<x-osc-ui::field :name="'media'"
                 :type="'dropzone'"
                 :required="true"
                 :label="'Upload media'"
                 :dropzoneId="'dropzone-test-form'"
                 :uploadUrl="'/upload/media'"
                 :acceptedFiles="'.jpg,.jpeg,.png,.pdf,.mp4'"
                 :maxFileSize="32"
                 :hint="'The file size must not exceed 32 MB, ' +
                  'and the accepted formats are jpg, png, pdf, and mp4.'">
</x-osc-ui::field>

Field

Property Name Property Description :name Name of the field (input, select, etc.) :type Type of the field: text, textarea, select, checkbox, radio, dropzone, input-chips, etc. :label Label of the field :placeholder Placeholder of the field :required Boolean, if true the field is required :withBorderRadius Boolean, if true the field will have border radius :hint The hint text of the field :prefix Icon prefix of the button :suffix Icon suffix of the button :minLength The minimum length of the input value (only for text and textarea types) :maxLength The maximum length of the input value (only for text and textarea types) :options Array, the array of options for select, radio, and input-chips types. The array should be in the format: [ [ "name" => "option1", "label" => "Option 1" ], [ "name" => "option2", "label" => "Option 2" ] ] :multiple Boolean, if true the field will be multiple (only for select and dropzone types) :dropzoneId String, the unique ID of the dropzone (only for dropzone type) :uploadUrl String, the url for uploading files (only for dropzone type) :acceptedFiles String, the accepted file types for dropzone (only for dropzone type), e.g. ".jpg,.png,.pdf" or for all types use "*" :maxFileSize Number, the maximum file size in MB for dropzone (only for dropzone type) :additionalClasses CSS additional classes of the link

Input Chips

Input Text

Email *

<x-osc-ui::field :name="'email'"
                 :prefix="'email-1'"
                 :type="'email'"
                 :label="'Email'"
                 :placeholder="'Insert email here'"
                 :required="true">
</x-osc-ui::field>

Password *

<x-osc-ui::field :name="'password'"
                 :type="'password'"
                 :label="'Password'"
                 :minLength="8"
                 :maxLength="24"
                 :required="true">
</x-osc-ui::field>

Link

Property Name Property Description :url Link URL :target Target of the URL :prefix Icon prefix of the link :suffix Icon suffix of the link :additionalClasses CSS additional classes of the link

This is a link

<x-osc-ui::link :url="'https://www.sacrocuore.it'"
                :target="'_blank'">
	This is a link
</x-osc-ui::link>

This is a link with prefix

<x-osc-ui::link :url="'https://www.sacrocuore.it'"
                :target="'_blank'"
                :prefix="'icon-placeholder'">
	This is a link with prefix
</x-osc-ui::link>

This is a link with suffix

<x-osc-ui::link :url="'https://www.sacrocuore.it'"
                :target="'_blank'"
                :suffix="'icon-placeholder'">
	This is a link with suffix
</x-osc-ui::link>

Select (single)

Select filter (single)

<?php

$options = [
	[ 'value' => 'filter_1', 'label' => 'Filter 1' ],
	[ 'value' => 'filter_2', 'label' => 'Filter 2' ],
	[ 'value' => 'filter_3', 'label' => 'Filter 3' ],
];

?>

<x-osc-ui::field :name="'filter'"
                 :type="'select'"
                 :label="'Select filter (single)'"
                 :placeholder="'Select filter'"
                 :value="'filter_2'"
                 :options="$options">
</x-osc-ui::field>

Select (multiple)

Select filter (multiple)

<?php

$options = [
	[ 'value' => 'filter_1', 'label' => 'Filter 1' ],
	[ 'value' => 'filter_2', 'label' => 'Filter 2' ],
	[ 'value' => 'filter_3', 'label' => 'Filter 3' ],
];

?>

<x-osc-ui::field :name="'filter'"
                 :type="'select'"
                 :label="'Select filter (multiple)'"
                 :placeholder="'Select filter'"
                 :multiple="true"
                 :value="['filter_1', 'filter_2']"
                 :options="$options">
</x-osc-ui::field>

Tag

Property Name Property Description :tag Tag value to be displayed :status The status of the tag, can be "active", "inactive" or "readonly" :additionalClasses CSS additional classes of the tag

Tag inactive

<x-osc-ui::tag :chip="'Tag inactive'" :status="'inactive'" />

Tag active

<x-osc-ui::tag :chip="'Tag active'" :status="'active'" />

Tag readonly

<x-osc-ui::tag :chip="'Tag readonly'" :status="'readonly'" />

Textarea

Description *

<x-osc-ui::field :name="'description'"
                 :type="'textarea'"
                 :required="true"
                 :label="'Description'"
                 :placeholder="'Insert description'">
</x-osc-ui::field>