From a93c646f32f98f2360932181e0d8aae3306478d4 Mon Sep 17 00:00:00 2001 From: Oleksandr Tochonyi <87442259+OleksandrTochonyi@users.noreply.github.com> Date: Fri, 1 Dec 2023 02:52:25 +0200 Subject: [PATCH] 5209 added bootstrap 5.3 card component (#5238) --- bootstrap-5-3-new.html | 925 ++++++++++++++++++++++++++++++++- images/card-image.png | Bin 0 -> 2911 bytes images/vertical-card-image.png | Bin 0 -> 1322 bytes 3 files changed, 903 insertions(+), 22 deletions(-) create mode 100644 images/card-image.png create mode 100644 images/vertical-card-image.png diff --git a/bootstrap-5-3-new.html b/bootstrap-5-3-new.html index ca2c9bc177..e556632bcd 100644 --- a/bootstrap-5-3-new.html +++ b/bootstrap-5-3-new.html @@ -33,17 +33,40 @@ }); @@ -1007,11 +1030,8 @@

Button toolbar

Sizing

Bootstrap: - https://getbootstrap.com/docs/5.3/components/button-group/#sizing + https://getbootstrap.com/docs/5.3/components/button-group/#sizing

@@ -1038,20 +1058,18 @@

Sizing

Nesting

Bootstrap: - https://getbootstrap.com/docs/5.3/components/button-group/#nesting + https://getbootstrap.com/docs/5.3/components/button-group/#nesting

- +
-
@@ -1084,7 +1099,8 @@

Vertical variation

-
    @@ -1093,7 +1109,8 @@

    Vertical variation

-
    @@ -1102,7 +1119,8 @@

    Vertical variation

-
    @@ -1111,7 +1129,8 @@

    Vertical variation

-
    @@ -1130,6 +1149,868 @@

    Vertical variation

+
+

Cards

+
+

Ordinary Card

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#example +

+
+
+
+ .card +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+ Go somewhere +
+
+
+
+
+

Body

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#body +

+
+
+
+
+ This is some text within a card body. +
+
+
+
+
+

Titles, text, and links

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#titles-text-and-links +

+
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+ Card link + Another link +
+
+
+
+
+

Images

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#images +

+
+
+
+ card +
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
+
+

List groups

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#list-groups +

+
+
+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+
+
+ Featured +
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card footer +
+
+
+
+
+

Kitchen sink

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#kitchen-sink +

+
+
+
+ card +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+
+
+
+

Header and footer

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#header-and-footer +

+
+
+
+
+ Featured +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
Featured
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+ Quote +
+
+
+

A well-known quote, contained in a blockquote element.

+
Someone famous in Source Title +
+
+
+
+
+
+ Featured +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ 2 days ago +
+
+
+
+
+

Using grid markup

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#using-grid-markup +

+
+
+
+
+
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+
+
+

Using utilities

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#using-utilities +

+
+
+
+
+
Card title
+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+ +
+
+
Card title
+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+
+
+
+

Using custom CSS

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#using-custom-css +

+
+
+
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+

Text alignment

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#text-alignment +

+
+
+
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+

Navigation

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#navigation +

+
+
+
+
+ +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ +
+
+ +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+

Image caps

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#image-caps +

+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+ card +
+
+
+
+

Image overlays

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#image-overlays +

+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+

Horizontal

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#horizontal +

+
+
+
+
+
+ card +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+

Background and color

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#background-and-color +

+
+
+
+
Header
+
+
Primary card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Secondary card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Success card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Danger card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Warning card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Info card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Light card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Dark card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
+
+

Border

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#border +

+
+
+
+
Header
+
+
Primary card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Secondary card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Success card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Danger card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Warning card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Info card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Light card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
Header
+
+
Dark card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
+
+
+
+

Mixins utilities

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#mixins-utilities +

+
+
+
+
Header
+
+
Success card title
+

Some quick example text to build on the card title and make up the bulk of the + card's content.

+
+
Footer
+
+
+
+
+

Card groups

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#card-groups +

+
+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+ card +
+
Card title
+

This card has supporting text below as a natural lead-in to additional + content.

+

Last updated 3 mins ago

+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show that equal height + action.

+

Last updated 3 mins ago

+
+
+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+ Last updated 3 mins ago +
+
+
+ card +
+
Card title
+

This card has supporting text below as a natural lead-in to additional + content.

+
+
+ Last updated 3 mins ago +
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show that equal height + action.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+
+

Grid cards

+

+ Bootstrap: + https://getbootstrap.com/docs/5.3/components/card/#grid-cards +

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+ +
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+ +
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+
+ card +
+
Card title
+

This is a short card.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content.

+
+
+
+
+
+ card +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+
+
+ +
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ card +
+
Card title
+

This card has supporting text below as a natural lead-in to additional + content.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ card +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show that equal height + action.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+
+
diff --git a/images/card-image.png b/images/card-image.png new file mode 100644 index 0000000000000000000000000000000000000000..d278b6a64a4acb2b75a28203f50a39223e91339a GIT binary patch literal 2911 zcmeH}`7;~nAIBrkw&=NNwNl&Zv8~ootve}dY}K(nggAqSp(u@tE45*lEhW{gCbV7C zuew^qeMCjn7Da*vsUy-hl8}%fqH+(^Y5p zk=+0QKU@(J$kac z5H#ZBA5}97-sgP4p5+YuyuGRND*&T%+zAf&W1j)wM>UOKwf>d=%iS=Vpo<5mSs&$s z!Gv?mfofUVk~M`4Ea8Y)Rv3)vl$pH=22*m4UDSU^3#qEQq#vLZc^Y z!pGvgUFzIwC1^0+3to$QHItMg=SOuMv9mC-W-%kX!@Q^w`HIOt6{63l7To9F98W{> zbqJTn+vRS`hrwhP%y^;&AwO*_*}zO7Mzq{OBzXr%+uv=jGihI$FLRR&WME*z_q`!D z#~w$XWW!5@zEeYdpQF-IuH(BF8F)sh@zK3Rtz2I+zmgdni*8G?C3;kG?wBIe z(=X_rKEwhMpvUz+{qIM2uRF@0o`AF=97@-xbjNEqGFY|`^)U-Bm(KcxbK-Mv<dy$$+@4kTZC)c%k=qk=9V1F+KedFOO8* zb+3YH`~1AGDNM9+CT>oX^V@>Lcf5kG+4E@Rb-i4IGmrL!jV3Ybss?dQ6GkhPog4eg zGPXXzt% zr>QtXLq9J+EwE}GnCnm?tUMpec$g#b*4g8M8d2GCgA^9GpgteF=|gXKcumtIvKWbT zmSg;aEi@)l<^Ff&7@HP$>2p19 zh!W)DR$1CZ1?`Q5PI}F`ttyH(U!9@a=*z~cheuotN8z0>GD+VyZhR})NoIc$){k4h z8*@l!i!4TnmVE;?NM6gU^?6LYydN~lWtLh&EL)|u3@e2-X5m9xKs2_7ouz`>u-muf zc*=~Cug1l>l4ps%y|)>Ce%UGYlo+*gLm)jj>UFekTW0J_Ge%f!T$(MGYd0DLC(rdW z1eM^mcM2nSq@i%{&;(fwR}L~4Q)luNU3m6!`T6MXw(e0~1Pty+4Z zPkJeO?C6dOSeShHIe061J9pA>5B31z!z>FmcRjPh4nKgp4AJgV=alpY40{PAZpqy@ z!Q+k>+u;&8VPjq|51f_Etexp6f;Z1hIY&UNT1|*_vvf zn@w7#J2SQcVpVmn*p+Pm_rz|$tioEW@?>t4<%^l>U}v`SZHYYb-UFb<;&Mu50O%(l z*Ye*d@*2w|hZz=+Jxk+Aoi+h~g^TpHRijA~LI{VQ=>>tD!3J`c74sq@N`u>g?m0V! zDH6R8hrdzxLA9ieG{93oc3>5848&&U{gnIhq_L!iceB1w%bNdi6bWNpZirHvzso%} z4cX0?h0U}l+zUlV7SC(%0ji>lPKF8Gn3Z5AtkX@yV<(^<4l(Gsr`4^2!H|bcQ)0Rz zEz?g##BGMCd_HA1g6BIBj1AeRRrz-j9Ojlxe6SW9uZh73#~#^)ZZnUxDRWAxqW#{U z5!U?o4$31XiWM)Jm$~#8GSvc&cJXT~p#b(7n*pwBX#@5HRj>T^ul#@P#xiesn^4-U Vf%Oh!D?i16Yc8HwYn|X3{{UHP%|!qJ literal 0 HcmV?d00001 diff --git a/images/vertical-card-image.png b/images/vertical-card-image.png new file mode 100644 index 0000000000000000000000000000000000000000..a855eed4f44f515e46294339091fbfa4b873bcd3 GIT binary patch literal 1322 zcmeAS@N?(olHy`uVBq!ia0vp^s~H#=MLC#&ECJi5|3HedILO_JVcj{Imp~3nx}&cn z1H;CC?mvmFKt5-IM`SSr1K(i~W;~w1A_b^szo(01NJZS+n-?1w889$he0@i2%^|Iv zLuxun`kb69Y72gEmM(i%d)HB~BE{uMz4*pRhPkX4MhSAl;B3f&w;!k4Wdsd-~ezxBq_hspp?}{`lKj$5gK0e!TN-^_|tRTMb-iD4$SXY;bw+yj9cqBKh-d zb|2o;!_S@-_cZ5Rh(pZ7FUP~A>h`{Wm(_DT^>0>NvwTngt@_ROe-qwW&RO1|vo~^a zZtk`3#WkCk#@@EtV>V%$#`%fnN6T|(zD}KcYT@egk7nCWXUG2g)fBXM#=hf{b5=LZ zW%at{{dSj>{Jd{Q`|J*7M2Bp9zvtY)j%s1whd!)dmT$ZDwJL9a^)+_(^Rs_Re!6qE z@A2ceeqVq4g*eC`c$oSBnWuhmZP0;?;~yWgZ9f0#ytskQ%a37-b+Qp|CaWG+pEkP{ zw{5RsmEr!L@B_2AX0=VXyk&hbHQM^qW~O=H|NZ}PJA-x2>+Lo2C!(8;u5M_E%TVf% zl-WCJ=SHrG`z!y(G&6l#Ho@zwNLD4!*USR-13C{9R^^6sE|9k_`VzG4n9c&}__8a9 zw{zM>T`uk7KYpI6On!sj<+A+pz1Ob)sH&K`P;9=vn|`_ANwa-_7kKziV*QQ)_*