Better responsive images

pull/6454/merge
Cagatay Civici 2025-01-13 13:39:44 +03:00
parent 1718c3a3d5
commit 6cc44c9d7a
4 changed files with 4 additions and 4 deletions

View File

@ -5,7 +5,7 @@
A theme can be renamed, duplicated and downloaded using the <i class="pi pi-ellipsis-h !text-sm"></i> button.
</p>
</DocSectionText>
<div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
<div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-dashboard.png" class="w-full" />
</div>
</template>

View File

@ -6,7 +6,7 @@
backup and run a preview before the migration. Depending on the result, you may choose to proceed with the migration process. In case there are missing tokens, your theme would receive them with placeholder values so it is recommended to
take a note of them before migration and then visit the components to replace the placeholder values with actual values of your choice. These types of newly added tokens would be highlighed in Editor.
</p>
<div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
<div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-migration.png" class="w-full" />
</div>
</DocSectionText>

View File

@ -6,7 +6,7 @@
UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant. This is an automated workflow and eliminates the manual design to code during the handoff process.
If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for transformation, preview and download purposes.
</p>
<div class="w-full sm:w-[48rem] pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
</div>
</DocSectionText>

View File

@ -4,7 +4,7 @@
The components are not opinionated about the typography. Important properties such as the font family, font size, and line-height do not have design tokens since they can be inherited from the document. For preview purposes, the
<i>settings</i> tab displays options to customize the base font and the font family of the document. These values are not available in the generated theme and need to be applied to your application at the document level.
</p>
<div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
<div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-editor.png" class="w-full" />
</div>
</DocSectionText>