Container card
בלוק צבע שמחזיק סקשן שלם.
prop אחד של UkContainer: card. הצבעים והאוויר בטוקנים. בטלפון הקצה שלו יושב על הקו של הקונטיינר.
<section className="uk-section">
<UkContainer card>…</UkContainer> {/* card="desktop": a strip on a phone, the card from 960 */}
</section>1 · Tonal blockuk-container-card
בלוק בגוון הרקע המשני, בעמוד שכולו על אותו רקע.
בלוק שמחזיק סקשן שלם
שיחה
מתחילים משיחה קצרה על מה שצריך.
הצעה
מקבלים הצעה מסודרת, עם לוח זמנים.
עבודה
עובדים בשלבים, ורואים כל שלב.
2 · Over a pictureuk-container-card
על סקשן עם תמונת רקע: כרטיס שהונח על החלל. במקום שכבה כהה על התמונה.
כרטיס שהונח על החלל
התמונה ממלאת את הסקשן, והמלל נשאר קריא על הכרטיס, בלי שכבה כהה על התמונה.
עוד פרטים3 · Dark splituk-container-card
שני טוקנים הופכים את הצבעים, ובתוכו גריד רגיל.
בלוק כהה עם split בפנים
שני טוקנים הופכים את הצבעים, והכול בפנים נשאר אותו גריד.
4 · Picture panel👻 Snippet
התמונה היא הכרטיס, רחב יותר מהקונטיינר (uk-container-x-large), בעמוד לבן. מה שהיה סתם תמונת רקע הופך לדבר הכי בולט בעמוד. צריך תמונה מוגזמת עם focal point בצד אחד וצד ריק למלל, ובצבע של הכרטיס. בטלפון היא כבר לא רקע אלא סטאק רגיל, המלל ומתחתיו התמונה, כי ככה הרבה יותר קל שזה יישאר רספונסיבי.
5 · Framed picture👻 Snippet
כשיש תמונת רקע, ב-99% מהמקרים מומלץ לשים overlay. זה גם החיסרון של העימוד הזה: הקריאות.
פתרונות יצירתיים למותגים דיגיטליים
מבחר מהעבודות האחרונות שלנו.
בלוק צבע מעוגל ברוחב הקונטיינר שמחזיק סקשן שלם, ואוויר גדול בתוכו. שובר רצף של סקשנים על אותו רקע, ועל תמונת רקע הוא נראה כמו כרטיס שהונח על החלל.
<div className="uk-mix"><img className="col-[1/12] row-[1/21]" … />…</div>uk-container-card, tokens --uk-container-card-bg / -fg / -padding-y, styles/uk-components.css
